Picker 选择器

介绍

通过滚动的方式让用户选择单列数据中的一个

使用指南

一般用法

column-data为数组类型，成员为字符串或数字，传递这个参数将显示一列选择器

<tms-picker column-data="{{columnData}}" default-index="3" bind:on-change="onChange"/>

columnIndex为列表下标，单列时始终为0，index为新的选中元素下标，preIndex为上一个选中元素下标， item为目标元素

Component({
  data: {
    columnData: [
      1, 2, 3, 4, 5, 6,
    ],
  },
  methods: {
    onChange(event) {
      const { columnIndex, index, preIndex, item } = event.detail
    }
  }
})

多列模式

当设置了multi-column-data后，column-data参数无效

<tms-picker multi-column-data="{{multiColumnData}}" bind:on-change="onChange"/>

Component({
  data: {
    multiColumnData: [
      {
        values: [1, 2, 3, 4, 5, 6],
        defaultIndex: 3,
      },
      {
        values: ['a', 'b', 'c', 'd', 'e', 'f'],
        defaultIndex: 3,
      },
    ],
  }
})

自定义样式

<tms-picker column-data="{{columnData}}" title="请选择" left-text="关闭" right-text="确定"
            rootStyle="padding:15px 5px;" actionStyle="line-height:25px;"
            pickerListStyle="margin:10px 0;"/>

定义每行元素高度

<tms-picker column-data="{{columnData}}" cell-height="100rpx"/>

API

属性	说明	类型	默认值	版本
column-data	滚动区域数据，设置multi-column-data后无效	array	[]
multi-column-data	滚动区域数据，多列模式	array	[]
cell-height	每一行的高度	string	88rpx
list-height	选择器内容区域高度	string	200rpx
root-style	自定义组件根元素容器style	string	-
action-style	自定义头部文案区域元素style	string	-
picker-list-style	自定义滚动区域容器元素style	string	-
default-index	默认滚动到哪一个位置的元素，单列模式有效	number	0
show-action-bar	是否显示顶部栏	boolean	true
left-text	顶部栏左侧文案	string	''
right-text	顶部栏右侧文案	string	''
title	顶部栏中间标题	string	''
rolling-disable	滚动时禁用右侧文案点击事件(有置灰效果)	boolean	true

EVENTS

属性	说明	类型
bind:on-change	滚动位置变化事件	(event) => {}
bind:on-click-title	点击标题事件	(event) => {}
bind:on-click-left-button	点击左侧文字事件	(event) => {}
bind:on-click-right-button	点击右侧文字事件	(event) => {}

CSS变量

// 背景色
--picker-background-color: #FFFFFF;
// 头部文案区域元素的line-height
--picker-action-line-height: 44rpx;
// 标题font-size
--picker-title-font-size: 27rpx;
// 左右文案元素的font-size
--picker-action-button-font-size: 24rpx;
// 右侧文案元素 color
--picker-confirm-button-color: #3886F2;
// 左侧文案元素 color
--picker-cancel-button-color: #969799;
// 内容区域高度，可控制显示几行元素。
--picker-list-height: 200rpx;
// 滚动元素font-size
--picker-cell-font-size: 27rpx;
// 滚动元素color
--picker-cell-text-color: @text-color;
// 滚动元素当前居中元素的 color
--picker-cell-selected-text-color: @text-color;
// 分隔线高度
--picker-midline-size: 2rpx;
// 分隔线颜色
--picker-midline-color: #97979730;

FAQ