Die Code-Implementierung zum Löschen und Bearbeiten erscheint, wenn Sie im Bankkartenverwaltungsmodul des Didi WeChat Mini-Programms nach links wischen

Der Inhalt dieses Artikels befasst sich mit der Code-Implementierung zum Löschen und Bearbeiten des Bankkartenverwaltungsmoduls im WeChat-Miniprogramm. Ich hoffe, dass dies der Fall ist Sei hilfreich für dich. Du hast geholfen.

Vor kurzem arbeite ich an einem kleinen Programm ähnlich wie Didi Software. Das Projekt ist tatsächlich etwas groß und viele Dinge werden zum ersten Mal erledigt. Dieses Mal werde ich einen Code-Datensatz zum Löschen mit dem Wischen nach links aufzeichnen. Die Hauptidee besteht darin, den Gleitabstand zu berechnen und den Übergang in CSS zu verwenden, um den Gleiteffekt zu steuern. Die gängige Methode besteht darin, den Rand zu steuern, um den Gleiteffekt nach links zu erzielen.

Laut der Benutzeroberfläche, die ich erhalten habe, habe ich Breite und Radius verwendet, um den Effekt des Linksgleitens zu erzielen, einen Attributwert erstellt und ihn zur Bestimmung in das Traversal-Array eingefügt ob es wahr oder falsch ist, um den Stil zu kontrollieren.

Abgeschlossener Effekt:

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 */

Verwandte Empfehlungen:

Detaillierte Erläuterung der Animationseigenschaften von CSS3 (mit Code)

So implementieren Sie das Neun-Quadrat-Raster in Flex-Layout im CSS-Stil (Code)

Wie erstelle ich Pfeile mit CSS? (Codebeispiel für Pfeile in verschiedene Richtungen)

Das obige ist der detaillierte Inhalt vonDie Code-Implementierung zum Löschen und Bearbeiten erscheint, wenn Sie im Bankkartenverwaltungsmodul des Didi WeChat Mini-Programms nach links wischen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!