The code implementation of deletion and editing appears when swiping left in the bank card management module of the WeChat mini program Didi

The content of this article is about the code implementation of deletion and editing when left sliding in the bank card management module of the WeChat applet Didi. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. You helped.

Recently, I am working on a small program similar to Didi Software. The project is indeed a bit big, and many things are done for the first time. This time I will record a code record about left swipe to delete. The main idea is to calculate the sliding distance and use transition in CSS to control the sliding effect. The mainstream method is to control the margin to achieve the left sliding effect.

According to the UI I got, what I used was to use width and radius to achieve the effect of left sliding, create an attribute value, and insert it into the traversal array to determine whether it is true. Or false to control the style.

Completed effect:

##html

<view class=&#39;content&#39;>
  <view class=&#39;item-box&#39; wx:for="{{bankList}}" wx:key="index">
    <view class="card-item {{item.txtStyle==&#39;true&#39; ? &#39;txtStyleFalse&#39;:&#39;txtStyleTrue&#39;}}" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE"  data-index="{{index}}">
      <view class=&#39;bank&#39;>{{item.bank}}</view>
      <view class=&#39;names&#39;>{{item.names}}</view>
      <view class=&#39;card-num&#39;>{{item.cardNum}}</view>
    </view>
    <view class=&#39;handle flex-box-start-top&#39;>
      <view class=&#39;edit&#39;>编辑</view>
      <view class=&#39;delect&#39;>删除</view>
    </view>
  </view>  </view>

js

/**
   * 页面的初始数据
   */
  data: {
    bankList:[
      { 'bank':'中国建设银行（建安支行）',
        'names':'章三',
        'cardNum':'***** ******* ***** ***0910'
      },
      {
        'bank': '中国工商银行（建安支行）',
        'names': '章三',
        'cardNum': '***** ******* ***** ***0910'
      },
    ],
    editIndex: 0,
    delBtnWidth:180//删除按钮宽度单位（rpx）
  },
  /*自定义方法--start */
  //
  touchS: function (e) {
    if (e.touches.length == 1) {
      this.setData({
        stX: 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.stX - moveX;
      //delBtnWidth 为右侧按钮区域的宽度 
      var delBtnWidth = that.data.delBtnWidth; 
      var txtStyle = "true"; 
      if(disX == 0 || disX < 0){
        //如果移动距离小于等于0，文本层位置不变 width: 660rpx;border-radius: 10rpx;
        // txtStyle = "left:0px"; 
        txtStyle = "true"; 
      }else if(disX > 0 ){
        //移动距离大于0，文本层left值等于手指移动距离 width: 470rpx;border-radius: 10rpx 0px 0px 10rpx;
        // txtStyle = "left:-"+disX+"px";
        txtStyle = "false"; 
        // if(disX>=delBtnWidth){ 
        //   //控制手指移动距离最大值为删除按钮的宽度 
        //   txtStyle = "left:-"+delBtnWidth+"px"; 
        // }
      } 
      //获取手指触摸的是哪一个item 
      var index = e.currentTarget.dataset.index; 
      var list = that.data.bankList; 
      //将拼接好的样式设置到当前item中
      list[index].txtStyle = txtStyle; 
      //更新列表的状态
      this.setData({ bankList:list }); 
      // console.log(this.data.bankList)
    } 
  },
  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.stX - endX; 
      var delBtnWidth = that.data.delBtnWidth; 
      //如果距离小于删除按钮的1/2，不显示删除按钮 
      var txtStyle = disX > delBtnWidth/2 ? "true":"false";
      //获取手指触摸的是哪一项 
      var index = e.currentTarget.dataset.index;
      var list = that.data.bankList; list[index].txtStyle = txtStyle; 
      //更新列表的状态 
      that.setData({ bankList:list });
    }
  },


  /*自定义方法--end */

Related recommendations:

Detailed explanation of animation properties of css3 (with code)

How to implement the nine-square grid in Flex layout in css Style (code)

How to make arrows with css? (Code examples for arrows in different directions)

The above is the detailed content of The code implementation of deletion and editing appears when swiping left in the bank card management module of the WeChat mini program Didi. For more information, please follow other related articles on the PHP Chinese website!