picker
是微信小程序的一个组件,它可以用来展示和选择一组选项。当用户选中某一项时,会触发 bindchange
事件,可以用此事件来处理选中项的变化。以下是如何利用 bindchange
事件的例子:
- 在 .wxml 文件中定义 picker 组件及其对应的事件处理器
<view class="container">
<picker bindchange="bindPickerChange" value="{
{index}}" range="{
{array}}">
<view class="weui-cell__hd">学校:</view>
<view class="weui-cell__bd">{
{array[index]}}</view>
<view class="weui-cell__ft"><i class="weui-icon-down"></i></view>
</picker>
</view>
- 在 .js 文件中定义 eventHandler 并更新数据
Page({
data: {
array: ['北京大学', '清华大学', '浙江大学'],
index: ''
},
bindPickerChange: function(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
index: e.detail.value
});
}
})
- 在需要的位置处理选择结果
在 bindPickerChange
中,可以根据 e.detail.value
来处理选中项的变化,例如:
bindPickerChange: function(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
let selectedSchool = this.data.array[e.detail.value];
console.log(selectedSchool);
this.setData({
index: e.detail.value,
});
}
在上述代码中,selectedSchool
就是用户选择的内容,可以用来做后续的操作。