Implement the sliding delete function in WeChat mini program

To implement the sliding delete function in WeChat mini programs, specific code examples are required

With the popularity of WeChat mini programs, developers often encounter problems during the development process to the implementation issues of some common functions. Among them, the sliding delete function is a common and commonly used functional requirement. This article will introduce in detail how to implement the sliding delete function in the WeChat applet and give specific code examples.

1. Requirements Analysis
In the WeChat mini program, the implementation of the sliding delete function involves the following points:

1. List display: To display a list that can be slid and deleted, each List items need to contain delete operations.
2. Trigger sliding: The user touches the list item and a sliding event is generated.
3. Sliding animation: To achieve a smooth sliding effect, that is, the list items can slide as the user's finger slides.
4. Delete operation: After the user slides the list item to a certain position, release the finger to trigger the delete operation.

2. Code implementation

1. WXML part:
   In the WXML of the mini program, we need to build a list in which each list item contains sliding deletion function. The code is as follows:

<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 part:
   After defining the style structure in WXML, we need to define the style in WXSS. The specific code is as follows:

.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. JS part:
   In the JS file of the mini program, we need to write specific code to implement the sliding delete function. The specific code is as follows:

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. Summary
Through the above code examples, we can easily implement the sliding delete function in the WeChat applet. In WXML, we built the structure required for the sliding delete function; in WXSS, we defined the style; in JS, we wrote the code to specifically implement the sliding delete function. I hope this article can help you implement the sliding delete function in WeChat mini programs.

The above is the detailed content of Implement the sliding delete function in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!