Bagaimanakah uniapp melaksanakan leret ke kiri untuk memadamkan fungsi produk?

Dengan pembangunan Internet mudah alih, apl e-dagang menjadi semakin popular dan membeli-belah menjadi lebih mudah. Dalam sesetengah apl e-dagang, pengguna boleh mengendalikan produk melalui antara muka gelongsor, seperti meleret ke kiri untuk memadamkan produk. Jadi, bagaimana untuk leret ke kiri untuk memadam item dalam uniapp? Artikel ini akan memperkenalkannya kepada anda secara terperinci.

1. Pertama sekali, perlu dijelaskan dengan jelas bahawa uniapp ialah rangka kerja pembangunan berdasarkan Vue.js, jadi pelaksanaan komponen kami akan lebih berasaskan Vue.js. Dalam Vue.js, kami biasanya menggunakan arahan v-for dan tatasusunan untuk pemaparan dinamik Oleh itu, kami juga boleh menggunakan kaedah yang serupa untuk memaparkan senarai produk kami dalam uniapp.
2. Seterusnya, kita perlu melaksanakan fungsi meleret ke kiri untuk memadamkan produk. Kami boleh menggunakan komponen pandangan alih yang disediakan oleh uni-app. Komponen ini boleh melaksanakan kesan seretan pada paksi-x. Dalam komponen pandangan alih, kita perlu menetapkan sifat berikut bagi komponen pandangan alih:

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

Antaranya, x ialah kedudukan komponen pandangan alih dan unit ialah rpx. Dalam senarai produk kami, setiap produk hendaklah merupakan komponen paparan alih.

3. Dalam komponen pandangan alih, kita perlu menambah butang padam, yang sepatutnya dipaparkan apabila komponen pandangan alih meluncur meninggalkan jarak tertentu. Dalam vue.js, kita boleh menggunakan arahan v-if untuk mengawal paparan dan penyembunyian unsur secara dinamik, dan dalam uniapp, kita juga boleh menggunakan pemaparan bersyarat untuk mencapai matlamat ini.
4. Apabila pengguna mengklik butang padam, kami perlu mengalih keluar item semasa. Dalam Vue.js, kita boleh mencapai ini melalui kaedah splice array Begitu juga, kaedah ini juga boleh digunakan dalam uniapp. Kami boleh menggunakan acara tersuai untuk mendengar acara klik butang padam dan mencetuskan acara dalam komponen anak untuk memadamkan produk semasa. Lihat kod sampel berikut untuk operasi tertentu:

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

Melalui kod sampel di atas, kami boleh melaksanakan leret ke kiri untuk memadam fungsi produk dalam uniapp. Perlu diingat bahawa senarai produk di sini hanyalah contoh Dalam situasi sebenar, kita perlu mendapatkan senarai produk daripada API dan memaparkannya secara dinamik. Pada masa yang sama, kita juga perlu menukar operasi pemadaman menjadi operasi tak segerak, iaitu, apabila memadam item, kita perlu menghantar permintaan kepada pelayan. Di sini kami hanya memperkenalkan operasi asas dalam uniapp, dan pelaksanaan khusus memerlukan penambahbaikan selanjutnya.

Atas ialah kandungan terperinci Bagaimanakah uniapp melaksanakan leret ke kiri untuk memadamkan fungsi produk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!