最近在做小程序项目,遇到官方文档出如果使用循环展示sliderView组件左滑删除的时候遇到的一些问题以及解决办法
如果按照官方文档中的使用方法是拿不到具体所要删除的某一列
底下详情介绍一下:

使用 wx:for 循环渲染 slideview

  < mp-slideview wx:for="{{slideviewList}}" wx:key="id" buttons="{{slideButtons}}" 
  bindbuttontap="slideButtonTap">
    ...
  < /mp-slideview>

左划某个 slideview,点击按键,在点击按键的处理函数 slideButtonTap 中,只能获取到按键在数组 slideButtons 中的index,并不能获取到 slideview 在循环渲染中的 index

slideButtonTap(e) {
    // 这里的 index 是按键在 slideButtons 中的 index
    console.log(e.detail.index)  
}

在文档和社区都没有找到相应的解决办法。最后只能选择自己魔改 slideview 组件代码

研究 slideview 的代码发现,slideButtonTap 的参数 e 是从 slideview 方法 buttonTapByWxs 传递过来的。

  // slideview.js
    buttonTapByWxs: function buttonTapByWxs(data) {
     this.triggerEvent('buttontap', data, {});
    },

e.detail.index 实际上就在 上面的 data 里。同样,如果要在按键处理函数 slideButtonTap 中获取 slideview 在循环渲染中的 index(为了和 button 的 index 区分开,暂且记作 slideviewId),就要把 slideviewId 也塞到 data 里。

那 slideview 又怎么知道自己的 slideviewId 呢,这就需要在循环渲染的时候告诉它。

所以我在 slideview 的 properties 中新增一个 slideviewId 属性,通过这个属性,将循环渲染的 index 传给它。

在 slideview.js 中

Component({
    options: {
        addGlobalClass: true,
        multipleSlots: true
    },
    properties: {
        extClass: {
            type: String,
            value: ''
        },
        ...
        // 用于标记循环渲染 wx:for 中的 index
        slideviewId: {
            type: Number,
            value: 0
        },
        ...
    },
    methods: {
        buttonTapByWxs: function buttonTapByWxs(data) {
            // 把 slideviewId 塞到 data 里,传递给按键点击处理函数
            data.slideviewId = this.data.slideviewId
            this.triggerEvent('buttontap', data, {});
        },
    }
}

在使用 slideview 的页面 wxml 文件

  < mp-slideview wx:for="{{slideviewList}}" wx:key="id" slideviewId="{{index}}" buttons="{{slideButtons}}" 
    bindbuttontap="slideButtonTap">
    ...
  < /mp-slideview>

这样在按键点击处理函数 slideButtonTap 中就可以知道被点击滑动按键的 slideview 是哪一个了

slideButtonTap(e) {
    // slideviewId 就是循环渲染中的 index
    console.log(e.detail.slideviewId)
}