小程序左滑收藏

先看效果

小程序左滑删除.gif

写了一大堆，其实就两点
1、获取手指移动的距离e.touches[0].clientX e.changedTouches[0].clientX;
2、判断距离大于收藏按钮宽度还是小于收藏按钮宽度，然后设置样式

<!-- wxml -->
    <view class="weui-panel__bd">
        <view wx:for="{{jokes}}" wx:key="{{item._id}}"  class='list' style="{{item.txtStyle}}">
          <navigator  bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE"  data-index="{{index}}" url="../jokesDetail/jokesDetail?id={{item._id}}" class=" weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active" >
              <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
                  <view class="weui-media-box__title">{{item.title}}</view>
                  <view class="weui-media-box__desc">{{item.content}}</view>
              </view>
          </navigator>
          <view  class='collection' bindtap='collectionFun' data-item='{{item}}' data-index="{{index}}">
              收藏
          </view>
        </view>
      </view>

Page({
  data: {
    jokes:[{"_id":"W8rfdg6qgQy38jQ5","title":"程序员三年工作经验","content":"一程序员去面试，面试官问：“你毕业才两年，这三年工作经验是怎么来的？！”程序员答：“加班。”"}],
    //记录触摸起始位置的X坐标
    startX: '',
    //收藏按钮的宽度
    collectionWidth:90
  },
// 左滑收藏
  touchS(e) {
    console.log("touchS" + e);
    //判断是否只有一个触摸点
    if (e.touches.length == 1) {
      this.setData({
        //记录触摸起始位置的X坐标
        startX: e.touches[0].clientX
      });
    }
  },
  touchM(e) {
    console.log("touchM:" + e);
    var that = this;
    if(e.touches.length==1){
      //记录触摸点位置的X坐标
      let moveX = e.touches[0].clientX;
      //计算手指起始点的X坐标与当前触摸点的X坐标的差值
      var disX = that.data.startX - moveX;
      //collectionWidth 为右侧按钮区域的宽度
      var collectionWidth = that.data.collectionWidth;
      var txtStyle = "";
      if (disX == 0 || disX < 0) {//如果移动距离小于等于0，文本层位置不变
        txtStyle = "margin-left:0px";
      } else if (disX > 0) {//移动距离大于0，文本层left值等于手指移动距离
        txtStyle = "margin-left:-" + disX + "px";
        if (disX >= collectionWidth) {
          //控制手指移动距离最大值为收藏按钮的宽度
          txtStyle = "margin-left:-" + collectionWidth + "px";
        }
      }
      //获取手指触摸的是哪一个item
      var index = e.currentTarget.dataset.index;
      var list = that.data.jokes;
      //将拼接好的样式设置到当前item中
      list[index].txtStyle = txtStyle; 
      //更新列表的状态
      this.setData({
        jokes: list
      });
    }
  },
  touchE(e) {
    console.log("touchE" + e);
    let that = this
    if (e.changedTouches.length == 1) {
      //手指移动结束后触摸点位置的X坐标
      let endX = e.changedTouches[0].clientX;
      //触摸开始与结束，手指移动的距离
      let disX = that.data.startX - endX;
      let collectionWidth = that.data.collectionWidth;
      //如果距离小于删除按钮的1/2，不显示删除按钮
      let txtStyle = disX > collectionWidth / 2 ? "margin-left:-" + collectionWidth + "px" : "margin-left:0px";
        //下一项触摸的时候前面的设为0
      if (disX > collectionWidth / 2){
        let jokes = this.data.jokes;
        for (let i = 0; i < jokes.length - 1; i++) {
          jokes[i].txtStyle = 'margin-left:0'
        }
        that.setData({
          jokes: jokes
        });
      }
      //获取手指触摸的是哪一项
      let index = e.currentTarget.dataset.index;
      let list = that.data.jokes;
      list[index].txtStyle = txtStyle; 
      //更新列表的状态
      that.setData({
        jokes: list
      });
    }
  },
}

/* wxss引用了weui.css */
.list{
  width:100%;
  box-sizing: border-box;
  margin-left: 0; 
  position: relative;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
/* 收藏样式 */
.collection{
  width: 90px;
  height: 87px;
  background-color: #074066;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: -90px;
  z-index: 100;
}