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. 概要
上記のコード例を通じて、WeChat アプレットにスライディング削除機能を簡単に実装できます。 WXML では、スライディング削除関数に必要な構造を構築し、WXSS ではスタイルを定義し、JS では、スライディング削除関数を具体的に実装するコードを作成しました。この記事が、WeChat ミニ プログラムでのスライド削除機能の実装に役立つことを願っています。

以上がWeChatミニプログラムにスライディング削除機能を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。