小程序列表左滑收藏

 WXMl页面

<view wx:for="{{zhaoxiang}}" wx:key="index" class='item'>
    <view class="main" bindtap="top" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" style="{{item.txtStyle}}"  data-index="{{index}}">
    <view data-order-no="{{item.orderNo}}" bindtap="clickOrder">
       // 中间显示数据已省略
        </view>
 </view>
 <view data-order-no="{{item.orderNo}}" data-index="{{index}}" bindtap="collect" class="inner del" wx:if="{{item.collectionId ==null}}">收藏</view>
          <view data-collection="{{item.collectionId}}"  data-index="{{index}}" bindtap="collect1" class="inner del" wx:else>取消收藏</view>
 </view>

 WXSS页面

/* 收藏样式 */
.item{
  width: 100%;
  height: 360rpx;
  margin-top: 8rpx;
}
.inner.del{
  position: relative;
  background-color: #01C2AB;
  width: 200rpx;
  height: 290rpx;
  top:-365rpx;
  left: 71%;
  color: #FFFFFF;
  text-align: center;
  line-height: 290rpx;
}

js页面 

//全局里写的
var initdata = function (that) {
  var list = that.data.zhaoxiang
  for (var i = 0; i < list.length; i++) {
    list[i].txtStyle = "";
    list[i].isMove = false;
  }
  that.setData({
    zhaoxiang: list
  })
}
Page({
  data: {
    zhaoxiang:[],
    delBtnWidth: 100,//删除按钮宽度
  },
// 手指刚放到屏幕触发
  touchS: function (e) {
    console.log("touchS" + e);
    initdata(this);
    // 判断是否只有一个触摸点
    if (e.touches.length == 1) {
      this.setData({
        // 记录触摸起始位置的X坐标
        startX: e.touches[0].clientX
      });
    };
    return false;
  },

  // 触摸时触发，手指在屏幕上每移动一次，触发一次
  touchM: function (e) {
    var that = this;
    if (e.touches.length == 1) {
      // 记录触摸点位置的X坐标
      var moveX = e.touches[0].clientX;
      // 计算手指起始点的X坐标与当前触摸点的X坐标的差值
      var disX = that.data.startX - moveX;
      // delBtnWidth 为右侧按钮区域的宽度
      var delBtnWidth = that.data.delBtnWidth;
      var txtStyle = "";
      if (disX == 0 || disX < 0) {      // 如果移动距离小于等于0，文本层位置不变
        txtStyle = "left:0px";
      } else if (disX > 0) {            // 移动距离大于0，文本层left值等于手指移动距离
        txtStyle = "left:-" + disX + "px";
        if (disX >= delBtnWidth) {
          // 控制手指移动距离最大值为删除按钮的宽度
          txtStyle = "left:-" + delBtnWidth + "px";
        }
      }
      // 获取手指触摸的是哪一个item
      var index = e.currentTarget.dataset.index;
      var list = that.data.zhaoxiang;
      // 将拼接好的样式设置到当前item中
      list[index].txtStyle = txtStyle;

      list[index].isMove = true;
      // 更新列表的状态
      this.setData({
        zhaoxiang: list
      });
    }
  },
  touchE: function (e) {
    console.log(e);
    var that = this
    if (e.changedTouches.length == 1) {
      // 手指移动结束后触摸点位置的X坐标
      var endX = e.changedTouches[0].clientX;
      // 触摸开始与结束，手指移动的距离
      var disX = that.data.startX - endX;
      var delBtnWidth = that.data.delBtnWidth;
      // 如果距离小于收藏按钮的1/2，不显示收藏按钮
      var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";
      // 获取手指触摸的是哪一项
      var index = e.currentTarget.dataset.index;
      var list = that.data.zhaoxiang;
      list[index].txtStyle = txtStyle;
      // 更新列表的状态
      that.setData({
        zhaoxiang: list
      });
    }
  }
})

 

 效果图