微信小程序 向左滑动显示（删除、修改）按钮

原理就是上下两个盒子，当上面的盒子向左滑动时显示出下面的盒子。
效果展示：

直接上代码，注释应该写的挺清楚的。

wxml

  <view class="list-item" wx:for="{{list}}" wx:key="id">
    <view class="item-btns">
        <image class="update" src="/icons/修改.png" bindtap="update"></image>
        <image class="delete" src="/icons/删除.png" bindtap="delete" data-id="{{item._id}}"></image>
    </view>
    <view class="item-cont" data-index="{{index}}" style="left:{{item.offsetX}}rpx" bindtouchstart="touchStart" catchtouchmove="touchMove" bindtouchend="touchEnd">
    </view>
  </view>

wxss

.list-item{
  margin: 10rpx auto;
  width: 700rpx;
  height:130rpx;
  position:relative;
}
.item-btns{
  display:flex;
  justify-content: flex-end;
  height: 100%;
}
.update{
  width: 80rpx;
  height: 80rpx;
  background-color: pink;
  border-radius: 50%;
  margin-right: 20rpx;
  margin-top: 25rpx;
}
.delete{
  width: 80rpx;
  height: 80rpx;
  background-color: pink;
  border-radius: 50%;
  margin-right: 30rpx;
  margin-top: 25rpx;
}
.item-cont{
  border-radius: 15rpx;
  position:absolute;
  top:0rpx;
  left:0rpx;
  width:100%;
  height:100%;
  background:#ddd;
}

js

let recordStartX = 0, currentOffsetX = 0, curIndex = 0; //按下初始值，当前滑块初始值，当前滑块下标
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[{id:1},{id:2},{id:3}],
    offsetWidth:-250, //上面的盒子向左滑动时，下面的盒子要显示出来的宽度，负号是指相对于起始位置向左滑动为负值
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  
  touchStart: function (e) { //触摸开始
    recordStartX = e.touches[0].clientX;    //记录触摸的初始位置
    curIndex = e.currentTarget.dataset.index;   //记录当前触摸的盒子下标
    currentOffsetX = this.data.list[curIndex].offsetX;  //记录当前滑块的初始值
    // if(lastIndex != curIndex){
    //     this.data.list[lastIndex].offsetX = 0;
    // }
  }
  ,
  touchMove: function (e) { //移动手指,向左移动过程中，事件被不断触发
    let list = this.data.list;
    let endX = e.touches[0].clientX;    //记录移动过程中的位置
    let gapX = recordStartX - endX;     //记录手指滑动的距离
    let result = currentOffsetX - gapX; //记录滑块当前的相对位置
    if (result >= this.data.offsetWidth ) { //如果大于下面盒子要显示的距离（因为是相对位置，两个变量都是负数）就改变滑块当前位置
      list[curIndex].offsetX = result;
    }
    this.setData({
      list:list
    });
  }
  ,
  touchEnd: function (e) { //手指抬起来(触摸结束)
    //lastIndex = curIndex;
    let list = this.data.list;
    let halfOffset = this.data.offsetWidth / 2; 
    if (list[curIndex].offsetX < halfOffset) { //如果滑动距离超过一半就直接滑到终点
        list[curIndex].offsetX = this.data.offsetWidth;
    } else {
        list[curIndex].offsetX = 0; //否则就回到起始位置

    }
    this.setData({
      list:list
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

这是可以多个盒子同时显示按钮，如果想只能同时显示一个按钮的话，就增加几行代码。

let recordStartX = 0, currentOffsetX = 0, curIndex = 0,lastIndex = 0; //按下初始值，当前滑块初始值，当前滑块下标，上一个滑块下标
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[{id:1},{id:2},{id:3}],
    offsetWidth:-250, //上面的盒子向左滑动时，下面的盒子要显示出来的宽度，负号是指相对于起始位置向左滑动为负值
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  
  touchStart: function (e) { //触摸开始
    recordStartX = e.touches[0].clientX;    //记录触摸的初始位置
    curIndex = e.currentTarget.dataset.index;   //记录当前触摸的盒子下标
    currentOffsetX = this.data.list[curIndex].offsetX;  //记录当前滑块的初始值
    if(lastIndex != curIndex){ //如果当前滑块不是上一个滑块，就将上一个滑块归位
        this.data.list[lastIndex].offsetX = 0;
    }
  }
  ,
  touchMove: function (e) { //移动手指,向左移动过程中，事件被不断触发
    let list = this.data.list;
    let endX = e.touches[0].clientX;    //记录移动过程中的位置
    let gapX = recordStartX - endX;     //记录手指滑动的距离
    let result = currentOffsetX - gapX; //记录滑块当前的相对位置
    if (result >= this.data.offsetWidth ) { //如果大于下面盒子要显示的距离（因为是相对位置，两个变量都是负数）就改变滑块当前位置
      list[curIndex].offsetX = result;
    }
    this.setData({
      list:list
    });
  }
  ,
  touchEnd: function (e) { //手指抬起来(触摸结束)
    lastIndex = curIndex;   //将当前下标的值赋给上一个滑块下标
    let list = this.data.list;
    let halfOffset = this.data.offsetWidth / 2; 
    if (list[curIndex].offsetX < halfOffset) { //如果滑动距离超过一半就直接滑到终点
        list[curIndex].offsetX = this.data.offsetWidth;
    } else {
        list[curIndex].offsetX = 0; //否则就回到起始位置

    }
    this.setData({
      list:list
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})