uniapp怎么实现左滑删除商品功能

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

<!-- 让商品列表动态渲染 --><view v-for="(item, index) in list" :key="index">   <!-- 判断商品是否被选中，选中时改变背景颜色 -->   <movable-view      :class="{        'swiper-item-active': 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 ? '-200rpx' : 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('delete', 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>