Implementieren Sie die Schiebelöschfunktion im WeChat-Miniprogramm

Um die Schiebelöschfunktion in WeChat-Miniprogrammen zu implementieren, sind spezifische Codebeispiele erforderlich

Angesichts der Beliebtheit von WeChat-Miniprogrammen stoßen Entwickler während des Entwicklungsprozesses häufig auf Implementierungsprobleme einiger gängiger Funktionen. Unter diesen ist die gleitende Löschfunktion eine häufige und häufig verwendete Funktionsanforderung. In diesem Artikel wird detailliert beschrieben, wie die Schiebelöschfunktion im WeChat-Applet implementiert wird, und es werden spezifische Codebeispiele gegeben.

1. Anforderungsanalyse
Im WeChat-Applet umfasst die Implementierung der Schiebe-Löschfunktion die folgenden Punkte:

1. Listenanzeige: Um eine Liste anzuzeigen, die verschoben und gelöscht werden kann, muss jedes Listenelement einen Löschvorgang enthalten .
2. Sliding auslösen: Der Benutzer berührt das Listenelement und ein Sliding-Ereignis wird generiert.
3. Gleitanimation: Erzielen Sie einen sanften Gleiteffekt, d. h. die Listenelemente können gleiten, wenn der Finger des Benutzers gleitet.
4. Löschvorgang: Nachdem der Benutzer das Listenelement an eine bestimmte Position verschoben hat, lässt er den Finger los, um den Löschvorgang auszulösen.

2. Code-Implementierung

1. WXML-Teil:
   Im WXML des Miniprogramms müssen wir eine Liste erstellen, in der jedes Listenelement die Funktion zum Schieben zum Löschen enthält. Der Code lautet wie folgt:

<view class="list">
  <block wx:for="{{listData}}" wx:for-item="item" wx:key="{{index}}">
    <view class="list-item" 
      animation="{{item.animation}}" 
      bindtouchstart="touchStart" 
      bindtouchmove="touchMove" 
      bindtouchend="touchEnd" 
      data-index="{{index}}">
      <view>{{item.title}}</view>
      <view class="btn-delete" bindtap="deleteItem" wx:if="{{item.showDel}}">删除</view>
    </view>
  </block>
</view>

2. WXSS-Teil:
   Nachdem wir die Stilstruktur in WXML definiert haben, müssen wir den Stil in WXSS definieren. Der spezifische Code lautet wie folgt:

.list{
  padding: 20rpx;
}

.list-item{
  position: relative;
  height: 100rpx;
  line-height: 100rpx;
  background-color: #ffffff;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.btn-delete{
  position: absolute;
  top: 0;
  right: 0;
  width: 120rpx;
  height: 100rpx;
  background-color: #f5222d;
  color: #ffffff;
  line-height: 100rpx;
  text-align: center;
  transition: all 0.2s;
  transform: translateX(120rpx);
}

.list-item:hover .btn-delete{
  transform: translateX(0);
}

3. JS-Teil:
   In der JS-Datei des Miniprogramms müssen wir spezifischen Code schreiben, um die gleitende Löschfunktion zu implementieren. Der spezifische Code lautet wie folgt:

Page({
  data: {
    listData: [
      { title: '列表项1', showDel: false, animation: '' },
      { title: '列表项2', showDel: false, animation: '' },
      { title: '列表项3', showDel: false, animation: '' },
      // 其他列表项...
    ],
    startX: 0, // 手指起始X坐标
    startY: 0, // 手指起始Y坐标
    activeIndex: -1, // 激活的列表项索引
  },

  touchStart(e) {
    this.data.activeIndex = e.currentTarget.dataset.index;
    this.data.startX = e.touches[0].clientX;
    this.data.startY = e.touches[0].clientY;
  },

  touchMove(e) {
    let index = e.currentTarget.dataset.index;
    let startX = this.data.startX;
    let startY = this.data.startY;
    let deltaX = e.touches[0].clientX - startX;
    let deltaY = e.touches[0].clientY - startY;

    // 水平滑动大于竖直滑动
    if (Math.abs(deltaX) > Math.abs(deltaY)) {
      // 滑动方向向右
      if (deltaX > 30) {
        this.showDelete(index);
      }
      // 滑动方向向左
      else if (deltaX < -30) {
        this.hideDelete();
      }
    }
  },

  touchEnd(e) {
    this.data.startX = 0;
    this.data.startY = 0;
  },

  showDelete(index) {
    let listData = this.data.listData;
    listData[index].showDel = true;
    listData[index].animation = 'animation: showDelete 0.2s;';
    this.setData({
      listData: listData
    });
  },

  hideDelete() {
    let listData = this.data.listData;
    listData[this.data.activeIndex].showDel = false;
    listData[this.data.activeIndex].animation = '';
    this.setData({
      listData: listData
    });
  },

  deleteItem(e) {
    let index = e.currentTarget.dataset.index;
    let listData = this.data.listData;
    listData.splice(index, 1);
    this.setData({
      listData: listData
    });
  }
})

3. Zusammenfassung
Durch die obigen Codebeispiele können wir die gleitende Löschfunktion problemlos im WeChat-Applet implementieren. In WXML haben wir die für die Sliding-Delete-Funktion erforderliche Struktur erstellt; in WXSS haben wir den Stil definiert und den Code geschrieben, um die Sliding-Delete-Funktion speziell zu implementieren. Ich hoffe, dieser Artikel kann Ihnen bei der Implementierung der Schiebelöschfunktion in WeChat-Miniprogrammen helfen.

Das obige ist der detaillierte Inhalt vonImplementieren Sie die Schiebelöschfunktion im WeChat-Miniprogramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!