微信小程序下拉列表代码
时间: 2024-10-22 22:03:45 浏览: 17
微信小程序 下拉列表的实现实例代码
微信小程序的下拉列表(Picker)是一种常用的组件,用于让用户从预设的选项中选择一项。以下是创建一个基本下拉列表的示例代码:
```html
<view>
<picker bindchange="bindPickerChange" value="{{selectedCity}}" range="{{cities}}">
请选择城市
</picker>
</view>
<script>
Page({
data: {
cities: ['北京', '上海', '广州', '深圳'],
selectedCity: '', // 初始值为空
},
bindPickerChange(e) { // 当用户选择新的值时触发的回调函数
this.setData({
selectedCity: e.detail.value // 更新当前选中的城市
});
}
})
</script>
```
在这个例子中,`<picker>`标签包含了三个属性:
1. `bindchange`:事件处理器,当用户改变选择时会调用`bindPickerChange`函数。
2. `value`:表示当前选中的值,默认初始值。
3. `range`:一个数组,定义了可供选择的选项。
阅读全文