Implémentez la fonction de suppression coulissante dans le mini-programme WeChat

Pour implémenter la fonction de suppression coulissante dans les mini-programmes WeChat, des exemples de code spécifiques sont nécessaires

Avec la popularité des mini-programmes WeChat, les développeurs rencontrent souvent des problèmes de mise en œuvre de certaines fonctions courantes au cours du processus de développement. Parmi eux, la fonction de suppression coulissante est une exigence fonctionnelle courante et couramment utilisée. Cet article présentera en détail comment implémenter la fonction de suppression coulissante dans l'applet WeChat et donnera des exemples de code spécifiques.

1. Analyse des exigences
Dans l'applet WeChat, la mise en œuvre de la fonction de suppression coulissante implique les points suivants :

1. Affichage de la liste : pour afficher une liste qui peut être glissée et supprimée, chaque élément de la liste doit inclure une opération de suppression. .
2. Déclenchement du glissement : l'utilisateur touche l'élément de la liste et un événement de glissement est généré.
3. Animation coulissante : obtenez un effet de glissement fluide, c'est-à-dire que les éléments de la liste peuvent glisser lorsque le doigt de l'utilisateur glisse.
4. Opération de suppression : une fois que l'utilisateur a fait glisser l'élément de la liste vers une certaine position, relâchez le doigt pour déclencher l'opération de suppression.

2. Implémentation du code

1. Partie WXML :
   Dans le WXML du mini programme, nous devons construire une liste, dans laquelle chaque élément de la liste contient la fonction de glisser pour supprimer. Le code est le suivant :

<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. Partie WXSS :
   Après avoir défini la structure du style en WXML, nous devons définir le style en WXSS. Le code spécifique est le suivant :

.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. Partie JS :
   Dans le fichier JS du mini programme, nous devons écrire du code spécifique pour implémenter la fonction de suppression coulissante. Le code spécifique est le suivant :

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. Résumé
Grâce aux exemples de code ci-dessus, nous pouvons facilement implémenter la fonction de suppression coulissante dans l'applet WeChat. En WXML, nous avons construit la structure requise pour la fonction de suppression coulissante ; en WXSS, nous avons défini le style en JS, nous avons écrit le code pour implémenter spécifiquement la fonction de suppression coulissante. J'espère que cet article pourra vous aider à implémenter la fonction de suppression coulissante dans les mini-programmes WeChat.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!