Utilisez uniapp pour implémenter la fonction de suppression coulissante

Utilisez uniapp pour implémenter la fonction de suppression coulissante

La fonction de suppression coulissante est l'une des méthodes d'interaction courantes dans les applications mobiles modernes. Elle permet aux utilisateurs de supprimer rapidement le contenu indésirable d'une liste ou d'une page via des gestes coulissants. Dans le framework uniapp, l'implémentation de la fonction de suppression coulissante est très simple et peut être appliquée à plusieurs plates-formes.

Tout d'abord, nous devons créer un projet uniapp et afficher les éléments de liste qui doivent être supprimés sur la page. Dans l'élément de liste, nous pouvons ajouter une zone qui déclenche la suppression glissante et implémenter l'événement correspondant.

Exemple de code HTML :

<template>
  <view>
    <view v-for="(item, index) in list" :key="index" class="item" @touchstart="touchStart(index)" @touchmove="touchMove(index)" @touchend="touchEnd(index)">
      <view class="content">{{ item }}</view>
      <view class="delete" @click="deleteItem(index)">删除</view>
    </view>
  </view>
</template>

Dans le code ci-dessus, nous avons utilisé la directive v-for pour parcourir les éléments de la liste et ajouter une zone qui déclenche une suppression glissante pour chaque élément de la liste. À droite de la zone de suppression coulissante, nous avons ajouté un bouton « Supprimer ».

Ensuite, nous devons implémenter la logique de suppression glissante dans l'instance de vue correspondante.

Exemple de code JavaScript :

<script>
export default {
  data() {
    return {
      list: ['列表项1', '列表项2', '列表项3', '列表项4', '列表项5'],
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 0,
      deleteWidth: 100,
      deletingIndex: -1
    }
  },
  methods: {
    touchStart(index) {
      this.deletingIndex = -1;
      this.startX = event.changedTouches[0].pageX;
      this.startY = event.changedTouches[0].pageY;
    },
    touchMove(index) {
      this.endX = event.changedTouches[0].pageX;
      this.endY = event.changedTouches[0].pageY;
      let moveX = this.endX - this.startX;
      let moveY = this.endY - this.startY;
      if (Math.abs(moveX) > Math.abs(moveY) && moveX < 0 && Math.abs(moveX) >= this.deleteWidth) {
        this.deletingIndex = index;
      } else if (this.deletingIndex === index && Math.abs(moveX) < Math.abs(moveY)) {
        this.deletingIndex = -1;
      }
    },
    touchEnd(index) {
      if (this.deletingIndex === index) {
        this.deleteItem(index);
      }
      this.deletingIndex = -1;
      this.startX = 0;
      this.startY = 0;
      this.endX = 0;
      this.endY = 0;
    },
    deleteItem(index) {
      this.list.splice(index, 1);
    }
  }
}
</script>

Dans le code ci-dessus, nous avons lié trois fonctions d'événement tactile touchStart, touchMove et touchEnd. Dans l'événement touchStart, nous enregistrons les informations de coordonnées lorsque le glissement commence. Dans l'événement touchMove, nous calculons la distance de glissement et déterminons si la fonction de suppression coulissante est actuellement activée en fonction de certaines conditions. Dans l'événement touchEnd, effectuez l'opération de suppression ou annulez la suppression en fonction du résultat du glissement.

Enfin, nous devons ajouter les styles correspondants à la page.

Exemple de code CSS :

<style>
.item {
  display: flex;
  height: 100px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
}

.content {
  flex: 1;
  padding-left: 20px;
  font-size: 28px;
}

.delete {
  width: 100px;
  background-color: #f00;
  color: #fff;
  text-align: center;
  font-size: 28px;
}
</style>

Grâce au code ci-dessus, nous avons implémenté une fonction de suppression coulissante de base et montré un exemple de suppression d'éléments de liste dans le projet uniapp. Dans les projets réels, nous pouvons personnaliser davantage le style et les effets d'interaction en fonction des besoins pour rendre la fonction de suppression coulissante plus conforme aux attentes des utilisateurs.

Résumé :
Dans le framework uniapp, il est très simple d'implémenter la fonction de suppression coulissante. Il vous suffit d'ajouter les événements et styles correspondants à la page. Grâce aux fonctions d'événements tactiles telles que touchStart, touchMove et touchEnd, nous pouvons facilement réaliser l'effet interactif de la suppression coulissante et effectuer l'opération de suppression dans la méthode correspondante. Dans le même temps, grâce à la personnalisation des styles CSS, nous pouvons rendre la fonction de suppression coulissante plus belle et plus pratique.

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!