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

Posted 2022-03-30 Kunkun只喝怡宝

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

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

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.offsetXrpx" 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 () 

  
)