Balayez vers la gauche sur uniapp et un bouton de suppression apparaît

Avec la popularité des smartphones et le développement de l'Internet mobile, de plus en plus de personnes commencent à utiliser les téléphones mobiles pour diverses opérations, notamment l'utilisation de diverses applications. Dans les applications, nous rencontrons généralement certaines données de liste, telles que des carnets d'adresses, des listes de messages, des listes de commandes, etc. Ces listes nécessitent souvent des opérations sur les données, telles que l'affichage des détails, le marquage comme lu, la suppression, etc. Parmi elles, l'opération de suppression est une opération relativement courante. Cet article se concentrera sur la façon d'obtenir l'effet d'un balayage vers la gauche pour faire apparaître un bouton de suppression dans UniApp.

UniApp est un framework de développement multiplateforme qui peut générer simultanément des applications pour plusieurs plates-formes en cours d'exécution (y compris iOS, Android, H5, des mini-programmes, des applications rapides, etc.) basées sur le même code. Cela élimine le besoin pour les développeurs d'écrire des codes distincts pour chaque plate-forme, ce qui améliore considérablement l'efficacité du développement et réduit les coûts de développement. L'exemple de code de cet article utilisera la partie Vue.js du framework de développement UniApp comme base.

1. Idée de mise en œuvre

Pour obtenir l'effet de glisser vers la gauche pour afficher le bouton Supprimer, l'approche générale consiste à ajouter une zone coulissante dans l'élément de liste lorsque l'utilisateur. fait glisser la zone vers la gauche, le bouton Supprimer s'affiche. Afin de garantir la prise en charge de plusieurs plates-formes en même temps, nous devons prendre en compte les opérations tactiles sur les appareils mobiles et les opérations de la souris sur PC. Sur cette base, nous devons mettre en œuvre la logique suivante :

1. Opération coulissante : surveiller les opérations de l'utilisateur et déterminer si l'utilisateur a effectué une opération coulissante dans la zone cible.
2. Zone d'opération : vous devez ajouter une zone coulissante à l'élément de liste.
3. Afficher le bouton de suppression : lorsque l'utilisateur glisse vers la gauche dans la zone cible, le bouton de suppression s'affiche.
4. Masquer le bouton de suppression : masquez le bouton de suppression lorsque l'utilisateur glisse vers la droite dans la zone cible.
5. Cliquez sur le bouton Supprimer : Lorsque l'utilisateur clique sur le bouton Supprimer, l'opération de suppression est déclenchée.

2. Processus de mise en œuvre

1. Créer une page de liste et un composant d'élément de liste

Nous avons d'abord besoin Créez une page de liste et un composant d'élément de liste. Ici, nous utilisons le composant de liste et le composant d'élément de liste dans le framework uni-ui comme base pour implémenter certains styles et mises en page de base. Le code spécifique est le suivant :

<!-- list.vue -->
<template>
  <view>
    <list>
      <list-item
        v-for="(item, index) in list"
        :key="index"
        :data-index="index"
        :class="item.active ? 'item-active' : ''"
      >
        <view
          class="item-content"
          @touchstart="onTouchStart(index, $event)"
          @touchmove="onTouchMove(index, $event)"
          @touchend="onTouchEnd(index, $event)"
          @mousedown="onMouseDown(index, $event)"
          @mousemove="onMouseMove(index, $event)"
          @mouseup="onMouseUp(index, $event)"
        >
          <view class="item-title">{{item.title}}</view>
          <view class="item-delete" v-show="item.active" @click="onDeleteItem(index)">删除</view>
        </view>
      </list-item>
    </list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { title: '列表项1', active: false },
        { title: '列表项2', active: false },
        { title: '列表项3', active: false },
        { title: '列表项4', active: false },
        { title: '列表项5', active: false },
      ],
      // 记录当前操作列表项的索引、起始滑动位置、当前滑动位置等信息
      currentIndex: -1,
      startX: 0,
      startY: 0,
      moveX: 0,
      moveY: 0,
    };
  },
  methods: {
    onTouchStart(index, event) {
      this.handleTouchStart(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);
    },
    onTouchMove(index, event) {
      this.handleTouchMove(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);
    },
    onTouchEnd(index, event) {
      this.handleTouchEnd(index, event.changedTouches[0].pageX, event.changedTouches[0].pageY);
    },
    onMouseDown(index, event) {
      this.handleTouchStart(index, event.pageX, event.pageY);
    },
    onMouseMove(index, event) {
      this.handleTouchMove(index, event.pageX, event.pageY);
    },
    onMouseUp(index, event) {
      this.handleTouchEnd(index, event.pageX, event.pageY);
    },
    handleTouchStart(index, x, y) {
      if (this.currentIndex !== -1) {
        return;
      }
      this.currentIndex = index;
      this.startX = x;
      this.startY = y;
    },
    handleTouchMove(index, x, y) {
      if (this.currentIndex !== index) {
        return;
      }
      this.moveX = x;
      this.moveY = y;
      const deltaX = this.moveX - this.startX;
      const deltaY = this.moveY - this.startY;
      if (Math.abs(deltaX) > Math.abs(deltaY)) {
        if (deltaX < 0) {
          this.list[index].active = true;
        } else {
          this.list[index].active = false;
        }
      }
    },
    handleTouchEnd(index, x, y) {
      if (this.currentIndex !== index) {
        return;
      }
      this.currentIndex = -1;
      this.moveX = x;
      this.moveY = y;
      const deltaX = this.moveX - this.startX;
      const deltaY = this.moveY - this.startY;
      if (Math.abs(deltaX) > Math.abs(deltaY)) {
        if (deltaX < 0) {
          this.list[index].active = true;
        } else {
          this.list[index].active = false;
        }
      }
    },
    onDeleteItem(index) {
      this.list.splice(index, 1);
    },
  },
};
</script>

<style lang="scss">
.item-active .item-content {
  transform: translateX(-60px);
}

.item-content {
  position: relative;
  height: 60px;
  padding: 0 20px;
  line-height: 60px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  overflow: hidden;

  .item-delete {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 0 20px;
    line-height: 60px;
    background-color: #f00;
    color: #fff;
    font-size: 18px;
  }
}
</style>

Ici, nous ajoutons un écouteur d'événement coulissant et un bouton de suppression au contenu de l'élément du composant d'élément de liste, et contrôlons l'affichage et le masquage du bouton de suppression en ajoutant un champ actif aux données. Dans le style, nous utilisons l'attribut transform pour obtenir l'effet de glissement vers la gauche et utilisons l'attribut overflow:hidden pour masquer le bouton de suppression.

2. Écoutez les événements de glissement

Nous devons écouter les événements tactiles pour implémenter les opérations de glissement. utilisés dans le code (événements mousedown, mousemove, mouseup) surveillent les opérations de glissement de l'utilisateur. Pour des détails d’implémentation spécifiques, veuillez vous référer au code ci-dessus.

3. Contrôler l'affichage et le masquage du bouton de suppression

Lorsque l'utilisateur glisse vers la gauche dans la zone cible, nous devons afficher le bouton de suppression ; lorsque l'utilisateur glisse vers la gauche dans la zone cible, nous devons afficher le bouton de suppression ; lorsqu'il glisse vers la droite dans la zone cible, nous devons masquer le bouton de suppression. Ici, nous implémentons le contrôle du bouton Supprimer en ajoutant un champ actif. Lorsque l'utilisateur glisse vers la gauche, nous définissons le champ actif sur true, sinon il le définit sur false.

4. Cliquez sur le bouton Supprimer pour déclencher l'opération de suppression

Lorsque l'utilisateur clique sur le bouton Supprimer, nous devons déclencher l'opération de suppression. Ici, nous supprimons l'élément actuel des données via la méthode splice de l'instance du composant Vue.js. Pour une implémentation spécifique, veuillez vous référer à la méthode onDeleteItem dans l'exemple de code.

3. Résumé

À ce stade, nous avons terminé l'effet d'un balayage vers la gauche pour apparaître sous la forme d'un bouton de suppression dans UniApp. En implémentant des événements glissants, en contrôlant l'affichage et le masquage du bouton de suppression et en cliquant sur le bouton de suppression pour déclencher l'opération de suppression, nous pouvons facilement ajouter des opérations de suppression aux données de la liste.

Il convient de noter que dans le développement réel, nous devrons peut-être répondre à davantage de besoins, tels que demander avant la suppression, prendre en charge la suppression à sélection multiple, etc. Sur cette base, nous pouvons procéder à davantage d’extensions et d’optimisations en fonction des besoins réels pour améliorer l’expérience utilisateur de l’application.

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!