微信小程序使用 wx:for 循环渲染 slideview 无法获取 index 的问题解决办法

Slideview | 微信开放文档

使用 wx:for 循环渲染 slideview

<mp-slideview wx:for="{{slideviewList}}" wx:key="id" buttons="{{slideButtons}}" bindbuttontap="slideButtonTap">
    <view>...</view>
</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">
    <view>...</view>
</mp-slideview>

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

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