小程序左滑查看详情，删除

一：需要用到的小程序函数

bindtouchstart 手指开始接触事件
bindtouchmove 手指移动事件

二：效果图

image.png

三：html

<view class='contents'>
  <view class='m_list'>
    <view class="list_item {{item.isTouchMove ? 'touch-move-active' : ''}}" wx:for="{{mList}}" wx:key="{{index}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove">
      <view class='m_info'>
        <view class='area'>{{item.resourcesNumber? item.resourcesNumber :'-----'}}</view>
        <view wx:if="{{item.merchantName}}">{{ item.merchantName}}</view>
      </view>
      <view class="del" catchtap="resetPass" data-index="{{index}}" data-detail="{{item}}">重置密码</view>
      <view class="del" data-index="{{index}}" catchtap="mDetail" data-detail="{{item}}">详情</view>
      <view class="del" wx:if="{{item.merchantName}}" data-detail="{{item}}" catchtap="del" data-index="{{index}}">删除</view>
    </view>
  </view>
</view>

四：css

page {
  background-color: #f2f2f2;
  font-size: 32rpx;
}

.m_list {
  width: 100%;
  margin-top: 10rpx;
}

.list_item {
  margin-top: 2rpx;
  width: 100%;
  display: flex;
  flex-direction: row;
  background: #fff;
  color: #666;
}

.m_info {
  width: 100%;
  padding: 10px;
  transition: all 0.4s;
  transform: translateX(90px);
  margin-left: -90px;
}

.area {
  color: #666;
  padding-bottom: 20rpx;
}

.touch-move-active .m_info, .touch-move-active .del {
  transform: translateX(0);
}

.del {
  background-color: #9a5caf;
  width: 105px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  transform: translateX(245px);
  transition: all 0.4s;
  margin-right: 1px;
}

五：js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    mList: [{
        hasEmployee: 0,
        id: 124,
        isTouchMove: false,
        merchantName: "杭州圣菲丹纺织品有限公司",
        resourcesNumber: "M-001-001"
      },
      {
        hasEmployee: 0,
        id: 125,
        isTouchMove: false,
        merchantName: "北京西佰丽装饰有限公司",
        resourcesNumber: "A-001-001"
      }
    ]
  },
  /**
   * 点击重设密码的时候触发
   */
  resetPass: function(e) {
    var resourcesNumber = e.currentTarget.dataset.detail.resourcesNumber; //展位号
    console.log(1)
  },
  /**
   *  点击跳转到详情页的时候触发 
   */
  mDetail: function(e) {
    var id = e.currentTarget.dataset.detail.id;
    console.log(2)
  },
  /**
   *  点击删除的时候触发
   */
  del: function(event) {
    var ljyunId = event.currentTarget.dataset.detail.ljyunId;
    console.log(3)
  },
  /**
   * 手指触摸动作开始 记录起点X坐标
   **/
  touchstart: function(e) {
    //开始触摸时 重置所有滑块全隐藏
    this.data.mList.forEach(function(v, i) {
      if (v.isTouchMove) //只操作为true的 
        v.isTouchMove = false; //右边滑块全隐藏（重设密码，删除，详情）
    })
    this.setData({
      startX: e.changedTouches[0].clientX,
      startY: e.changedTouches[0].clientY,
      mList: this.data.mList
    })
  },
  /**
   * 手指滑动事件处理
   */
  touchmove: function(e) {
    var that = this,
      index = e.currentTarget.dataset.index, //当前索引
      startX = that.data.startX, //开始X坐标
      startY = that.data.startY, //开始Y坐标
      touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标
      touchMoveY = e.changedTouches[0].clientY, //滑动变化坐标
      //获取滑动角度
      angle = that.angle({
        X: startX,
        Y: startY
      }, {
        X: touchMoveX,
        Y: touchMoveY
      });
    this.data.mList.forEach(function(v, i) {
      v.isTouchMove = false
      //滑动超过30度角 return
      if (Math.abs(angle) > 30) return;
      if (i == index) {
        if (touchMoveX > startX) //右滑
        {
          v.isTouchMove = false
        } else { //左滑
          v.isTouchMove = true //左边滑块显示（重设密码，详情，删除）
        }
      }
    })
    //更新数据
    that.setData({
      mList: this.data.mList
    })
  },
  /**
   * 计算滑动角度
   * @param {Object} start 起点坐标
   * @param {Object} end 终点坐标
   */
  angle: function(start, end) {
    var _X = end.X - start.X,
      _Y = end.Y - start.Y
    //返回角度 /Math.atan()返回数字的反正切值
    return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {},
})