Wie implementiert Uniapp die Funktion „Linkswischen zum Löschen von Produkten“?

Mit der Entwicklung des mobilen Internets werden E-Commerce-Apps immer beliebter und das Einkaufen immer bequemer. In einigen E-Commerce-Apps können Benutzer Produkte über die verschiebbare Oberfläche bedienen, indem sie beispielsweise nach links wischen, um Produkte zu löschen. Wie implementiert man also das Wischen nach links, um Produkte in Uniapp zu löschen? In diesem Artikel wird es Ihnen ausführlich vorgestellt.

1. Zunächst muss klargestellt werden, dass uniapp ein auf Vue.js basierendes Entwicklungsframework ist, sodass unsere Komponentenimplementierung stärker auf Vue.js basieren wird. In Vue.js verwenden wir im Allgemeinen die v-for-Anweisung und Arrays für das dynamische Rendering. Daher können wir eine ähnliche Methode auch zum Rendern unserer Produktliste in uniapp verwenden.
2. Als nächstes müssen wir die Funktion implementieren, nach links zu wischen, um Produkte zu löschen. Wir können die von uni-app bereitgestellte Komponente für bewegliche Ansichten verwenden. Diese Komponente kann Zieheffekte auf der x-Achse implementieren. In der Komponente der beweglichen Ansicht müssen wir die folgenden Eigenschaften der Komponente der beweglichen Ansicht festlegen:

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

wobei x die Position der Komponente der beweglichen Ansicht ist und die Einheit rpx ist. In unserer Produktliste sollte jedes Produkt eine bewegliche Ansichtskomponente sein.

3. In der Komponente mit beweglicher Ansicht müssen wir eine Schaltfläche zum Löschen hinzufügen, die angezeigt werden soll, wenn die Komponente mit beweglicher Ansicht über eine bestimmte Distanz hinaus nach links verschoben wird. In vue.js können wir die v-if-Direktive verwenden, um das Anzeigen und Ausblenden von Elementen dynamisch zu steuern, und in uniapp können wir dies auch durch bedingtes Rendering erreichen.
4. Wenn der Benutzer auf die Schaltfläche „Löschen“ klickt, müssen wir das aktuelle Produkt entfernen. In Vue.js können wir dies durch die Splice-Methode des Arrays erreichen. Ebenso kann diese Methode auch in Uniapp verwendet werden. Wir können ein benutzerdefiniertes Ereignis verwenden, um auf das Klickereignis der Schaltfläche „Löschen“ zu warten und das Ereignis in der untergeordneten Komponente auszulösen, um das aktuelle Produkt zu löschen. Sehen Sie sich den folgenden Beispielcode für bestimmte Vorgänge an:

<!-- 让商品列表动态渲染 -->
<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>

Mit dem obigen Beispielcode können wir die Funktion „Nach links wischen zum Löschen eines Produkts“ in Uniapp implementieren. Es ist zu beachten, dass die Produktliste hier nur ein Beispiel ist. In tatsächlichen Situationen müssen wir die Produktliste von der API abrufen und dynamisch rendern. Gleichzeitig müssen wir den Löschvorgang auch in einen asynchronen Vorgang umwandeln, d. h. beim Löschen eines Elements müssen wir eine Anfrage an den Server senden. Hier stellen wir nur die Grundoperationen in Uniapp vor, und die spezifische Implementierung muss weiter verbessert werden.

Das obige ist der detaillierte Inhalt vonWie implementiert Uniapp die Funktion „Linkswischen zum Löschen von Produkten“?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!