WeChat 미니 프로그램에서 슬라이딩 삭제 기능 구현

WeChat 미니 프로그램에서 슬라이딩 삭제 기능을 구현하려면 특정 코드 예제가 필요합니다.

WeChat 미니 프로그램의 인기로 인해 개발자는 개발 과정에서 일부 공통 기능의 구현 문제에 자주 직면합니다. 그중 슬라이딩 삭제 기능은 일반적으로 사용되는 기능 요구 사항입니다. 이 기사에서는 WeChat 애플릿에서 슬라이딩 삭제 기능을 구현하는 방법을 자세히 소개하고 구체적인 코드 예제를 제공합니다.

1. 요구 사항 분석
WeChat 애플릿에서 슬라이딩 삭제 기능 구현에는 다음 사항이 포함됩니다.

1. 목록 표시: 슬라이드하여 삭제할 수 있는 목록을 표시하려면 각 목록 항목에 삭제 작업이 포함되어야 합니다. .
2. 트리거 슬라이딩: 사용자가 목록 항목을 터치하면 슬라이딩 이벤트가 생성됩니다.
3. 슬라이딩 애니메이션: 부드러운 슬라이딩 효과를 구현합니다. 즉, 사용자의 손가락 슬라이드에 따라 목록 항목이 슬라이드될 수 있습니다.
4. 삭제 작업: 사용자가 목록 항목을 특정 위치로 슬라이드한 후 손가락을 떼면 삭제 작업이 시작됩니다.

2. 코드 구현

1. WXML 부분:
   미니 프로그램의 WXML에서 각 목록 항목에는 삭제 기능이 포함된 목록을 작성해야 합니다. 코드는 다음과 같습니다.

<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 부분:
   WXML에서 스타일 구조를 정의한 후 WXSS에서 스타일을 정의해야 합니다. 구체적인 코드는 다음과 같습니다.

.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 부분:
   미니 프로그램의 JS 파일에서 슬라이딩 삭제 기능을 구현하려면 특정 코드를 작성해야 합니다. 구체적인 코드는 다음과 같습니다.

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. 요약
위의 코드 예시를 통해 위챗 애플릿에서 슬라이딩 삭제 기능을 쉽게 구현할 수 있습니다. WXML에서는 WXSS에서 슬라이딩 삭제 기능에 필요한 구조를 구축했고, JS에서는 스타일을 정의했으며, 슬라이딩 삭제 기능을 구체적으로 구현하는 코드를 작성했습니다. 이 기사가 WeChat 애플릿에서 슬라이딩 삭제 기능을 구현하는 데 도움이 되기를 바랍니다.

위 내용은 WeChat 미니 프로그램에서 슬라이딩 삭제 기능 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!