Gunakan applet WeChat untuk melaksanakan fungsi pengisihan seret dan lepas

Gunakan applet WeChat untuk melaksanakan fungsi pengisihan seret dan lepas Kod contoh

Apabila saya mula-mula belajar applet WeChat, saya selalu berfikir bahawa melaksanakan fungsi isihan seret dan lepas adalah sangat sukar. Walau bagaimanapun, dengan menggali dokumentasi rasmi dan mencuba pendekatan yang berbeza, akhirnya saya berjaya melaksanakan fungsi ini. Dalam artikel ini, saya akan berkongsi contoh kod khusus yang melaksanakan fungsi pengisihan seret dan lepas.

Mula-mula, buat senarai semua item boleh diisih dalam fail wxml. Contohnya:

<view class="sortable-list">
  <view wx:for="{{items}}" wx:key="unique-key" wx:for-item="item" wx:for-index="index" class="sortable-item"
    data-index="{{index}}" bindtouchstart="onDragStart" bindtouchmove="onDragging" bindtouchend="onDragEnd"
    bindtouchcancel="onDragEnd">
    {{item}}
  </view>
</view>

Dalam fail gaya wxss, kita perlu menambah beberapa gaya pada item boleh diisih untuk menjadikannya boleh diseret. Contohnya:

.sortable-item {
  padding: 10rpx;
  background-color: #F7F7F7;
  margin-bottom: 10rpx;
  border: 1rpx solid #CCCCCC;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.sortable-item.dragging {
  opacity: 0.6;
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
  z-index: 999;
  border-color: #33CCFF;
}

Dalam fail js yang sepadan, kita perlu menentukan beberapa fungsi pengendalian acara untuk melaksanakan pengisihan seret dan lepas. Mula-mula, kita perlu menentukan senarai item yang diisih dan indeks penyeretan nilai indeks dalam medan data halaman:

Page({
  data: {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
    draggingIndex: -1
  },
  // ...
});

Seterusnya, kita perlu melaksanakan pengendali acara untuk permulaan seret, proses seret dan akhir seret ：

Page({
  data: {
    // ...
  },
  onDragStart(e) {
    this.setData({
      draggingIndex: e.currentTarget.dataset.index
    });
  },
  onDragging(e) {
    const index = e.currentTarget.dataset.index;
    const draggingIndex = this.data.draggingIndex;

    if (draggingIndex !== -1) {
      const items = this.data.items;
      const [item] = items.splice(draggingIndex, 1);
      items.splice(index, 0, item);

      this.setData({
        items
      });
      this.setData({
        draggingIndex: index
      });
    }
  },
  onDragEnd(e) {
    this.setData({
      draggingIndex: -1
    });
  }
});

Dalam pengendali acara seret permulaan padaDragStart, kami mendapat nilai indeks item seret semasa dan simpan ke medan dragIndex dalam data.

Dalam pengendali peristiwa proses seret onDragging, kami mengalih keluar item seret dari kedudukan asalnya dan memasukkannya ke dalam kedudukan seret semasa. Akhir sekali, kami menyimpan senarai yang diubah suai pada data dan mengemas kini nilai indeks item seret semasa.

Dalam pengendali acara tamat seret onDragEnd, kami menetapkan semula medanIndex seret dalam data kepada -1, menunjukkan tamatnya proses seret.

Di atas ialah contoh kod lengkap untuk melaksanakan fungsi pengisihan seret dan lepas applet WeChat. Dengan menjalankan kod ini, kita boleh melaksanakan fungsi pengisihan seret dan lepas dalam program mini. Harap contoh kod ini berguna! Jika anda mempunyai sebarang soalan, jangan ragu untuk bertanya!

Atas ialah kandungan terperinci Gunakan applet WeChat untuk melaksanakan fungsi pengisihan seret dan lepas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!