微信小程序 picker 多选
时间: 2024-11-15 17:30:41 浏览: 5
微信小程序的 `picker` 组件是一个用于展示选项并允许用户进行多选的组件。它通常用于选择日期、时间、类别或其他需要多值选择的场景。`picker` 的结构包括两部分:
1. **选择区域** (Multiple): 当设置为 `mode="multiple"`,这个区域会显示多行选项供用户选择,用户可以选择多项,并通过 `bindchange` 事件传递所选的值。
2. **选项列表**: 需要提供一个数组作为 `options` 属性,每个选项是一个对象,包含 `value` 和 `label` 两个字段,分别表示数据值和显示文本。
下面是一个基础的 `picker` 组成示例:
```html
<picker mode="multiple" value="{{selectedValues}}" bindchange="handlePickerChange">
<view wx:for="{{categories}}">
<view>{{item.label}}</view>
</view>
</picker>
```
JavaScript 部分:
```javascript
Page({
data: {
categories: [
{ value: 'category1', label: '分类一' },
{ value: 'category2', label: '分类二' },
// 更多选项...
],
selectedValues: [] // 初始为空数组,存储用户选择的值
},
handlePickerChange(e) {
this.setData({
selectedValues: e.detail.value // 更新已选值
});
}
})
```
阅读全文