技術標籤：小程式前端小程式

微信小程式滑動元件之刪除 修改 功能

微信小程式Slideview左滑刪除元件

效果完成圖：

html

<view class="page">
    <view class="page__hd">
        <view class="page__title">Slideview</view>
        <view class="page__desc">左滑操作</view>
    </view>
    <view class="page__bd">
      <view class="weui-cells">
          <mp-slideview buttons="{{slideButtons}}" bindbuttontap="slideButtonTap">
              <mp-cell value="左滑可以刪除" footer="說明文字"></mp-cell>
          </mp-slideview>
      </view>

      <view class="weui-slidecells">
        <mp-slideview buttons="{{slideButtons}}" icon="{{true}}" bindbuttontap="slideButtonTap">
          <view class="weui-slidecell">
            左滑可以刪除（圖示Button）
          </view>
        </mp-slideview>
      </view>
    </view>
</view>
 

js:現在目前只有default和warn，warn是紅色按鈕

Page({
    onLoad: function(){
        this.setData({
            icon: base64.icon20,
            slideButtons: [{
              text: '普通',
              src: '/page/weui/cell/icon_love.svg', // icon的路徑
            },{
              type: 'warn',
              text: '警示',
              extClass: 'test',
                src: '/page/weui/cell/icon_del.svg', // icon的路徑
            }],
        });
    },
    slideButtonTap(e) {
        console.log('slide button tap', e.detail)
    }
});
 

最重要的一行程式碼 e.detail.index（用這個來判斷使用者點選的刪除還是修改）

js部分

 slideButtonTap(e) {
  var manageid = e.detail.index;//獲取選中的引數，是修改還是刪除
    if(manageid == 1){//如果是刪除就呼叫這個方法
       let data = {
      'userOpenId': e.currentTarget.dataset.miniopenid,
    };
    app.request('POST', nobinduser_url, data, (res) => {
      if (res.code == 1000) {
        wx.showToast({
          title: res.data,  
          icon: 'success',
          duration: 2000
        })
        this.onLoad();
      }
    })
    }else  if(manageid == 0){//如果是修改就呼叫這個方法
      let data = {
        'userOpenId': e.currentTarget.dataset.miniopenid,
      };
      app.request('POST', get_userrole_url, data, (res) => {
        if (res.code == 1000) {
          wx.showToast({
            title: res.data,
            icon: 'success',
            duration: 2000
          })
          this.onLoad();
        }
      })
    }
  }
})