Comment Uniapp implémente-t-il la fonction de balayage vers la gauche pour supprimer le produit ?

Avec le développement de l'Internet mobile, les applications de commerce électronique deviennent de plus en plus populaires et les achats deviennent de plus en plus pratiques. Dans certaines applications de commerce électronique, les utilisateurs peuvent utiliser des produits via l'interface coulissante, par exemple en balayant vers la gauche pour supprimer des produits. Alors, comment balayer vers la gauche pour supprimer des éléments dans uniapp ? Cet article vous le présentera en détail.

1. Tout d'abord, il doit être clair qu'uniapp est un framework de développement basé sur Vue.js, donc l'implémentation de nos composants sera davantage basée sur Vue.js. Dans Vue.js, nous utilisons généralement l'instruction v-for et les tableaux pour le rendu dynamique. Par conséquent, nous pouvons également utiliser une méthode similaire pour afficher notre liste de produits dans uniapp.
2. Ensuite, nous devons implémenter la fonction de balayage vers la gauche pour supprimer des produits. Nous pouvons utiliser le composant de vue mobile fourni par uni-app. Ce composant peut implémenter des effets de glissement sur l'axe des x. Dans le composant à vue mobile, nous devons définir les propriétés suivantes du composant à vue mobile :

<movable-view 
  class="swiper-item" 
  x="{{item.x}}" 
  animation="true" 
  direction="horizontal" 
  damping="80" 
  friction="2" 
 ></movable-view>

où x est la position du composant à vue mobile et l'unité est rpx. Dans notre liste de produits, chaque produit doit être un composant à vue mobile.

3. Dans le composant à vue mobile, nous devons ajouter un bouton de suppression, qui doit être affiché lorsque le composant à vue mobile glisse vers la gauche au-delà d'une certaine distance. Dans vue.js, nous pouvons utiliser la directive v-if pour contrôler dynamiquement l'affichage et le masquage des éléments, et dans uniapp, nous pouvons également utiliser le rendu conditionnel pour y parvenir.
4. Lorsque l'utilisateur clique sur le bouton Supprimer, nous devons supprimer le produit actuel. Dans Vue.js, nous pouvons y parvenir grâce à la méthode splice du tableau. De même, cette méthode peut également être utilisée dans uniapp. Nous pouvons utiliser un événement personnalisé pour écouter l'événement de clic du bouton de suppression et déclencher l'événement dans le composant enfant pour supprimer le produit actuel. Consultez l'exemple de code suivant pour des opérations spécifiques :

<!-- 让商品列表动态渲染 -->
<view v-for="(item, index) in list" :key="index">
   <!-- 判断商品是否被选中，选中时改变背景颜色 -->
   <movable-view 
     :class="{
        &#39;swiper-item-active&#39;: item.active
      }" 
     @change="handleChange(index, $event)" 
     @touchend="handleTouchEnd(index, $event)" 
     x="{{item.x}}" 
     animation="true" 
     direction="horizontal" 
     damping="80" 
     friction="2" 
     :style="{left: item.active ? &#39;-200rpx&#39; : 0}"
   >
     <view class="swiper-wrapper">
       <view class="image-wrapper">
         <image :src="item.image"></image>
       </view>
       <view class="content-wrapper">
         <view class="title">{{item.title}}</view>
         <view class="price">{{item.price}}</view>
         <view class="number">{{item.number}}</view>
       </view>
       <!-- 绑定删除操作 -->
       <view 
         class="delete-btn" 
         v-if="item.active" 
         @click="$emit(&#39;delete&#39;, index)"
       >删除</view>
     </view>
   </movable-view>
 </view>
 
<script>
  export default {
    data() {
      return {
        list: [
          {
            title: '商品1',
            image: '',
            price: 100,
            number: 1,
            active: false,
            x: 0
          },
          {
            title: '商品2',
            image: '',
            price: 200,
            number: 1,
            active: false,
            x: 0
          }
        ]
      }
    },
    methods: {
      // 左滑删除商品
      handleChange(index, event) {
        // 获取movable-view组件的位置信息
        const { detail } = event;
        const x = detail.x;
        this.list[index].x = x;
        // 当移动距离超过200rpx时，显示删除按钮
        if (x <= -200) {
          this.list[index].active = true;
        } else {
          this.list[index].active = false;
        }
      },
      // 停止触摸事件
      handleTouchEnd(index, event) {
        const { detail } = event;
        const x = detail.x;
        // 当用户放手时，如果movable-view组件位置小于-200rpx，则直接删除该商品
        if (x <= -200) {
          this.list.splice(index, 1);
        } else {
          // 否则，商品位置复位
          this.list[index].x = 0;
        }
        // 删除操作完成后，将所有商品的选中状态重置
        this.list.forEach((item) => {
          item.active = false;
        });
      }
    }
  }
</script>

Grâce à l'exemple de code ci-dessus, nous pouvons implémenter le balayage vers la gauche pour supprimer la fonction de produit dans uniapp. Il convient de noter que la liste de produits ici n'est qu'un exemple. Dans des situations réelles, nous devons obtenir la liste de produits à partir de l'API et la restituer dynamiquement. Dans le même temps, nous devons également transformer l'opération de suppression en une opération asynchrone, c'est-à-dire que lors de la suppression d'un élément, nous devons envoyer une demande au serveur. Ici, nous présentons uniquement les opérations de base dans uniapp, et la mise en œuvre spécifique doit encore être améliorée.

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!