@wines/picker-view NPM

`@wines/picker-view` PickerView 单列选择器

PickerView 单列选择器

嵌入页面的滚动选择器。

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "PickerView",
  "usingComponents": {
    "wux-picker-view": "@wines/picker-view"
  }
}

示例

<view class="page">
	<view class="page__hd">
		<view class="page__title">PickerView</view>
		<view class="page__desc">单列选择器</view>
	</view>
	<view class="page__bd">
		<view class="sub-title">Default</view>
		<wux-picker-view options="{{ options[0] }}" />
		<view class="sub-title">Loading</view>
		<wux-picker-view options="{{ options[0] }}" loading />
		<view class="sub-title">Controlled</view>
		<wux-picker-view
		 value="{{ value }}"
		 controlled
		 options="{{ options[1] }}"
		 bind:valueChange="onValueChange"
		/>
	</view>
</view>

import { PickerViewGetValue } from '@wines/picker-view';
import './index.less';

const seasons = [
  ['王', '马', '蔡'],
  // 云效不支持特殊emojj
  ['撕葱', '粑粑', 'X'],
];

Page({
  data: {
    value: '粑粑',
    options: seasons,
  },
  onValueChange(e) {
    const detail = e.detail as PickerViewGetValue;
    this.setData({ value: detail.value });
    console.log('onValueChange', detail);
  },
});

API

PickerView props

参数	类型	描述	默认值
prefixCls	`string`	自定义类名前缀	wux-picker-col
defaultValue	`string`	默认值，当 `controlled` 为 `false` 时才生效	-
value	`string`	当前值，当 `controlled` 为 `true` 时才生效	-
controlled	`boolean`	是否受控说明文档	false
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`	滚动数据选择变化后的回调函数	-

PickerView externalClasses

名称	描述
wux-class	根节点样式类
wux-mask-class	蒙层的类名
wux-indicator-class	选择器中间选中框的类名
wux-content-class	选择器主体内容的类名