微信小程序滑动组件之删除修改功能

微信小程序滑动组件之删除 修改 功能

微信小程序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();
        }
      })
    }
  }
})