微信小程序 weui slideview 组件点击时传递参数

WeUI 小程序组件库的左滑删除组件 slideview 非常适合对条目进行编辑、删除操作。

使用文档

https://developers.weixin.qq.com/miniprogram/dev/extended/weui/slideview.html

但是在点击按钮之后，如何知道具体是哪行数据被点击了呢？

需要用到按钮组配置 buttons 设置，但是不能按照官方文档中的写死的做法，需要针对每一行数据做定制的 buttons 配置。

具体参数配置方法：

WXML

<mp-slideview buttons="{{item.btns}}" bindbuttontap="slideButtonTap" icon
  wx:for="{{items}}" wx:for-index="index" wx:for-item="item">
  <view>{{item.name}}</view>
</mp-slideview>

icon 属性是了显示图标，而非文字。

JS

在拉取数据周，对数据列表做遍历，依次在 buttons 配置上加上对应的 id。以便在点击时，将该行数据的 ID 传递给点击回调函数。

let items = res.data.data;
for (let item of items) {
  item.btns = [{
    text: '编辑',
    src: '/images/edit.png',
    data: item.id,
  },{
    type: 'warn',
    text: '删除',
    src: '/images/del.png',
    data: item.id,
  }];
}

this.setData({
  items: items
})

点击处理：

slideButtonTap(e) {
  let id = e.detail.data;
  let btnIndex = e.detail.index;

  if (btnIndex === 0) {
    // 编辑
  } else if (btnIndex === 1) {
    // 删除
  }
},

关于作者 🌱

我是来自山东烟台的一名开发者，有敢兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式