微信小程序下拉框分级
时间: 2024-11-21 14:19:47 浏览: 25
微信小程序下拉筛选菜单WXDropDownMenu组件
微信小程序的下拉框(Picker)用于展示选项供用户选择,支持单选或多级选择。如果需要创建分级的下拉框,你可以使用`picker`组件,并设置其type属性为`select`(多选模式)加上数组结构的数据作为`options`。例如:
```html
<view>
<picker bindchange="bindPickerChange" type="select">
<view wx:for="{{ optionsArray }}">
<view>{{ item.label }}</view>
</view>
</picker>
</view>
<script>
Page({
data: {
optionsArray: [
{ label: '一级选项1', value: '1' },
{ label: '一级选项2', value: '2' },
{ label: '---中间级---', value: '' }, // 空值用于分隔层级
{ label: '二级选项1', value: 'sub1' },
{ label: '二级选项2', value: 'sub2' }
],
selectedValue: '', // 当前选择的值,默认为空
},
bindPickerChange(e) {
this.setData({ selectedValue: e.detail.value });
}
})
</script>
```
在这个例子中,当用户点击下拉框时,会显示一个多级的选项列表,用户可以选择第一级、第二级的选项。`selectedValue`数据会在用户做出选择时更新。
阅读全文