README
@wines/picker-view-multi
PickerViewMulti 多列选择器
嵌入页面的滚动选择器。
使用指南
在 page.json 中引入组件
{
"navigationBarTitleText": "PickerViewMulti",
"usingComponents": {
"wux-picker-view-multi": "@wines/picker-view-multi"
}
}
示例
<view class="page">
<view class="page__hd">
<view class="page__title">PickerViewMulti</view>
<view class="page__desc">多列选择器</view>
</view>
<view class="page__bd">
<view class="sub-title">Multiple</view>
<wux-picker-view-multi value="{{ value }}" options="{{ options }}" bind:valueChange="onValueChange" />
<view class="sub-title">Single</view>
<wux-picker-view-multi value="{{ value }}" options="{{ options[0] }}" bind:valueChange="onValueChange" />
<view class="sub-title">Loading</view>
<wux-picker-view-multi options="{{ options }}" loading />
</view>
</view>
import './index.less';
import { PickerViewMultiGetValue } from '@wines/picker-view-multi';
const seasons = [
['王', '马', '蔡'],
// 云效不支持特殊emojj
['撕葱', '粑粑', 'X'],
];
Page({
data: {
// 云效不支持特殊emojj
value: ['蔡', 'X'],
options: seasons,
},
onValueChange(e) {
const detail = e.detail as PickerViewMultiGetValue;
this.setData({ value: detail.value });
console.log('onValueChange', e.detail);
},
});
API
PickerViewMulti props
参数 | 类型 | 描述 | 默认值 |
---|---|---|---|
prefixCls | string |
自定义类名前缀 | wux-popup-picker |
pickerPrefixCls | string |
picker 自定义类名前缀 | wux-picker-col |
value | array |
当前值 | [] |
itemHeight | number |
每列子元素的高度 | 34 |
itemStyle | string,object |
每列子元素的样式 | - |
indicatorStyle | string,object |
设置选择器中间选中框的样式 | - |
indicatorClass | string |
设置选择器中间选中框的类名 | - |
maskStyle | string,object |
设置蒙层的样式 | - |
maskClass | string |
设置蒙层的类名 | - |
labelAlign | string |
设置文本对齐方式,可选值为 right、center、left | center |
loading | boolean |
是否显示 loading 状态 | false |
defaultFieldNames | object |
自定义 options 中的 value、label、children 字段 | { label: 'label', value: 'value', children: 'children' } |
options | array |
可选项数据源 | [] |
options[].value | string |
属性值 | - |
options[].label | string |
描述 | - |
options[].children | array |
子选项 | [] |
options[].disabled | boolean |
是否禁用 | false |
bind:beforeChange | function |
当滚动选择开始时的回调函数 | - |
bind:valueChange | function |
每列数据选择变化后的回调函数 | - |
bind:scrollChange | function |
滚动数据选择变化后的回调函数 | - |