picker-view-column怎么数据绑定
时间: 2023-08-14 17:02:12 浏览: 133
picker-view-column 组件可以通过 `bindchange` 事件来监听用户选择的变化,而数据绑定可以通过 `picker-view-column` 组件的 `bind:tap` 事件来实现。具体步骤如下:
1. 在 `wxml` 文件中定义 `picker-view` 和 `picker-view-column` 组件,并为 `picker-view-column` 组件绑定数据源和事件处理函数:
```html
<picker-view bindchange="pickerChange">
<picker-view-column bindtap="columnTap">
<view wx:for="{{columnData}}" wx:key="">{{item}}</view>
</picker-view-column>
</picker-view>
```
2. 在 `js` 文件中定义 `pickerChange` 和 `columnTap` 事件处理函数,并初始化数据:
```javascript
Page({
data: {
columnData: ["A", "B", "C"],
selectedColumn: 0
},
pickerChange: function(e) {
this.setData({
selectedColumn: e.detail.value
})
},
columnTap: function(e) {
console.log("column tap", e.currentTarget.dataset.index)
}
})
```
在上述代码中,`columnData` 定义了 `picker-view-column` 组件的数据源,`selectedColumn` 记录用户当前选择的列,`pickerChange` 和 `columnTap` 分别处理用户选择变化和点击事件。需要注意的是,在 `picker-view-column` 中使用 `wx:for` 循环渲染数据时,需要指定 `wx:key` 属性,这样可以提高渲染效率和防止出现数据混乱的情况。
阅读全文