uniapp は左スワイプで製品を削除する機能をどのように実装していますか?

モバイルインターネットの発展に伴い、電子商取引アプリの人気はますます高まり、ショッピングはますます便利になってきています。一部の e コマース アプリでは、ユーザーは左にスワイプして商品を削除するなど、スライド インターフェイスを通じて商品を操作できます。では、uniapp で左にスワイプしてアイテムを削除するにはどうすればよいでしょうか?この記事では詳しく紹介していきます。

1. まず、uniapp は Vue.js ベースの開発フレームワークであることを明確にする必要があるため、コンポーネントの実装はより Vue.js ベースになります。 Vue.js では通常、動的レンダリングに v-for 命令と配列を使用するため、同様の方法を使用して uniapp で製品リストをレンダリングすることもできます。
2. 次に、左にスワイプして商品を削除する機能を実装する必要があります。 uni-app が提供する可動ビュー コンポーネントを使用できます。このコンポーネントは、X 軸にドラッグ効果を実装できます。可動ビュー コンポーネントでは、以下の可動ビュー コンポーネントのプロパティを設定する必要があります。

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

このうち、x は可動ビュー コンポーネントの位置、単位は rpx です。 。製品リストでは、各製品は可動ビュー コンポーネントである必要があります。

3. 可動ビュー コンポーネントでは、削除ボタンを追加する必要があります。このボタンは、可動ビュー コンポーネントが一定の距離を超えて左にスライドしたときに表示される必要があります。 vue.js では、v-if ディレクティブを使用して要素の表示と非表示を動的に制御できます。uniapp では、条件付きレンダリングを使用してこれを実現することもできます。
4. ユーザーが削除ボタンをクリックしたら、現在の製品を削除する必要があります。 Vue.js では、配列の splice メソッドを通じてこれを実現できますが、同様に、このメソッドは uniapp でも使用できます。カスタム イベントを使用して、削除ボタンのクリック イベントをリッスンし、子コンポーネントでイベントをトリガーして現在の製品を削除できます。特定の操作については、次のサンプル コードを参照してください。

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

上記のサンプル コードを通じて、uniapp で製品機能を削除するための左スワイプを実装できます。なお、ここで示した商品リストは一例であり、実際にはAPIから商品リストを取得して動的に表示する必要があります。同時に、削除操作を非同期操作に変える必要があります。つまり、アイテムを削除するときに、サーバーにリクエストを送信する必要があります。ここでは uniapp の基本的な操作のみを紹介します。具体的な実装にはさらなる改善が必要です。

以上がuniapp は左スワイプで製品を削除する機能をどのように実装していますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。