Laksanakan fungsi padam gelongsor dalam program mini WeChat

Untuk melaksanakan fungsi padam gelongsor dalam program mini WeChat, contoh kod khusus diperlukan

Dengan populariti program mini WeChat, pembangun sering menghadapi masalah pelaksanaan beberapa fungsi biasa semasa proses pembangunan. Antaranya, fungsi padam gelongsor adalah keperluan fungsi yang biasa dan biasa digunakan. Artikel ini akan memperkenalkan secara terperinci cara melaksanakan fungsi padam gelongsor dalam applet WeChat dan memberikan contoh kod khusus.

1. Analisis Keperluan
Dalam applet WeChat, pelaksanaan fungsi padam gelongsor melibatkan perkara berikut:

1. Paparan senarai: Untuk memaparkan senarai yang boleh digelongsorkan dan dipadam, setiap item senarai perlu menyertakan operasi pemadaman .
2. Pencetus gelongsor: Pengguna menyentuh item senarai dan acara gelongsor dijana.
3. Animasi gelongsor: mencapai kesan gelongsor yang lancar, iaitu item senarai boleh meluncur semasa jari pengguna meluncur.
4. Padam operasi: Selepas pengguna meluncurkan item senarai ke kedudukan tertentu, lepaskan jari untuk mencetuskan operasi pemadaman.

2. Pelaksanaan kod

1. Bahagian WXML:
   Dalam WXML program mini, kita perlu membina senarai, di mana setiap item senarai mengandungi fungsi gelongsor untuk memadam. Kodnya adalah seperti berikut:

<view class="list">
  <block wx:for="{{listData}}" wx:for-item="item" wx:key="{{index}}">
    <view class="list-item" 
      animation="{{item.animation}}" 
      bindtouchstart="touchStart" 
      bindtouchmove="touchMove" 
      bindtouchend="touchEnd" 
      data-index="{{index}}">
      <view>{{item.title}}</view>
      <view class="btn-delete" bindtap="deleteItem" wx:if="{{item.showDel}}">删除</view>
    </view>
  </block>
</view>

2. WXSS bahagian:
   Selepas mentakrifkan struktur gaya dalam WXML, kita perlu mentakrifkan gaya dalam WXSS. Kod khusus adalah seperti berikut:

.list{
  padding: 20rpx;
}

.list-item{
  position: relative;
  height: 100rpx;
  line-height: 100rpx;
  background-color: #ffffff;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.btn-delete{
  position: absolute;
  top: 0;
  right: 0;
  width: 120rpx;
  height: 100rpx;
  background-color: #f5222d;
  color: #ffffff;
  line-height: 100rpx;
  text-align: center;
  transition: all 0.2s;
  transform: translateX(120rpx);
}

.list-item:hover .btn-delete{
  transform: translateX(0);
}

3. Bahagian JS:
   Dalam fail JS program mini, kita perlu menulis kod khusus untuk melaksanakan fungsi padam gelongsor. Kod khusus adalah seperti berikut:

Page({
  data: {
    listData: [
      { title: '列表项1', showDel: false, animation: '' },
      { title: '列表项2', showDel: false, animation: '' },
      { title: '列表项3', showDel: false, animation: '' },
      // 其他列表项...
    ],
    startX: 0, // 手指起始X坐标
    startY: 0, // 手指起始Y坐标
    activeIndex: -1, // 激活的列表项索引
  },

  touchStart(e) {
    this.data.activeIndex = e.currentTarget.dataset.index;
    this.data.startX = e.touches[0].clientX;
    this.data.startY = e.touches[0].clientY;
  },

  touchMove(e) {
    let index = e.currentTarget.dataset.index;
    let startX = this.data.startX;
    let startY = this.data.startY;
    let deltaX = e.touches[0].clientX - startX;
    let deltaY = e.touches[0].clientY - startY;

    // 水平滑动大于竖直滑动
    if (Math.abs(deltaX) > Math.abs(deltaY)) {
      // 滑动方向向右
      if (deltaX > 30) {
        this.showDelete(index);
      }
      // 滑动方向向左
      else if (deltaX < -30) {
        this.hideDelete();
      }
    }
  },

  touchEnd(e) {
    this.data.startX = 0;
    this.data.startY = 0;
  },

  showDelete(index) {
    let listData = this.data.listData;
    listData[index].showDel = true;
    listData[index].animation = 'animation: showDelete 0.2s;';
    this.setData({
      listData: listData
    });
  },

  hideDelete() {
    let listData = this.data.listData;
    listData[this.data.activeIndex].showDel = false;
    listData[this.data.activeIndex].animation = '';
    this.setData({
      listData: listData
    });
  },

  deleteItem(e) {
    let index = e.currentTarget.dataset.index;
    let listData = this.data.listData;
    listData.splice(index, 1);
    this.setData({
      listData: listData
    });
  }
})

3. Ringkasan
Melalui contoh kod di atas, kita boleh dengan mudah melaksanakan fungsi padam gelongsor dalam applet WeChat. Dalam WXML, kami membina struktur yang diperlukan untuk fungsi padam gelongsor, kami menentukan gaya dalam JS, kami menulis kod untuk melaksanakan fungsi padam gelongsor secara khusus. Saya harap artikel ini dapat membantu anda melaksanakan fungsi padam gelongsor dalam applet WeChat.

Atas ialah kandungan terperinci Laksanakan fungsi padam gelongsor dalam program mini WeChat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!