Implementation of left-swipe deletion effect in WeChat mini program

Today we will talk about the implementation of the effect of sliding left on the WeChat applet Delete. Many APPs on the market are now using this effect. On a listView page, slide an item to the left. When , a delete or other option will appear on the right side. The user experience is very good and the operation is very convenient. Today we use the WeChat applet to achieve this effect...

Look at the effect first

The effect to be achieved

The effect to be achieved:
1. When sliding to the left, the item follows the finger and moves to the left. At the same time, two clickable buttons
2 appear on the right side. When the sliding distance is greater than half the width of the button and you release your finger, the item automatically slides to the left to display the button. When the sliding distance is less than half the width of the button, the item automatically returns to Original position, hidden button.

Idea:

1. First, each item on the page is divided into upper and lower layers. The upper layer is placed with normal content, and the lower layer is placed with buttons displayed by left sliding. This can be usedz-index to achieve layering.
2. The upper layer of the item uses absolute positioning. We manipulate the value of the left attribute to move it to the left.
3, we use the touch object provided by the WeChat applet api and 3 functions related to finger touch (touchstart, touchmove, touch end) to realize the item moving with the finger.

Mini program api-touch object

Paste_Image.png

Because it is relatively simple, I will go directly to the code. Detailed explanations are in the comments of the code. First look at the layout of the page

<!--这是一个item的代码>
    <view class="address-item" wx:for="{{addressList}}" >
   <!--这里绑定了刚才说的3个函数分别为 touchS，touchM touchE-->
    <!--这里注意这个  style="{{item.txtStyle}}" ，这是我们一会再js中 将要设置的样式 -->
        <view>
         <!--中间无关的代码已被我删除-->
        </view>

         <!--这里是左滑按钮部分----start-->
        <view>
            <view>设为默认地址</view>
            <view>删除</view>
        </view>
         <!--这里是左滑按钮部分----end-->
    

and then look at the js code

Page({
  data:{
    addressList:[{"Contact":"钟诚","Mobile":13888888888,"Address":"江苏省苏州市工业园区创意产业园"},
{"Contact":"凹凸曼","Mobile":13666666666,"Address":"江苏省苏州市工业园区独墅湖体育馆"},
{"Contact":"图傲曼","Mobile":13666666666,"Address":"江苏省苏州市工业园区独墅湖体育馆"}],
    editIndex:0,
    delBtnWidth:150//删除按钮宽度单位（rpx）
  },
  onLoad:function(options){},
 //手指刚放到屏幕触发
  touchS:function(e){
    console.log("touchS"+e);
   //判断是否只有一个触摸点
    if(e.touches.length==1){
      this.setData({
        //记录触摸起始位置的X坐标
        startX:e.touches[0].clientX
      });
    }
  },
 //触摸时触发，手指在屏幕上每移动一次，触发一次
  touchM:function(e){
      console.log("touchM:"+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，文本层left值等于手指移动距离
        txtStyle = "left:-"+disX+"px";
        if(disX>=delBtnWidth){
          //控制手指移动距离最大值为删除按钮的宽度
          txtStyle = "left:-"+delBtnWidth+"px";
        }
      }
      //获取手指触摸的是哪一个item
      var index = e.currentTarget.dataset.index;
      var list = that.data.addressList;
      //将拼接好的样式设置到当前item中
      list[index].txtStyle = txtStyle; 
      //更新列表的状态
      this.setData({
       addressList:list
      });
    }
  },
  touchE:function(e){
      console.log("touchE"+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.addressList;
      list[index].txtStyle = txtStyle; 
      //更新列表的状态
      that.setData({
       addressList:list
      });
    }
  }

The above is the detailed content of Implementation of left-swipe deletion effect in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!