ListPicker列表下拉

下拉选择器，支持普通选择器、多列选择器、时间选择器、日期选择器和省市区选择器。

示例图

基础用法

页面 .json 文件 usingComponents 中引入组件

// json
{
    "usingComponents": {
        "mx-list-picker": "/components/mxwui/list-picker/index"
    }
}

页面 .wxml 文件中使用组件

<mx-list-picker />

更多用法示例

样式类型 styleType

提供3种样式，属性：styleType，可选 horizontal、vertical、web，默认 horizontal。必填。

• 样式一：horizontal

<mx-list-picker styleType="horizontal" />

• 样式二：vertical

<mx-list-picker styleType="vertical" />

• 样式三：web 风格

<mx-list-picker styleType="web" />

下拉类型 mode

属性：mode，可选 selector 普通选择器、multiSelector 多列选择器、time 时间选择器、date 日期选择器、region 省市区选择器，默认 selector 普通选择器。必填。

• 普通选择器：horizontal

<mx-list-picker mode="selector" />

• 多列选择器：multiSelector

<mx-list-picker mode="multiSelector" />

• 时间选择器：time

<mx-list-picker mode="time" />

• 日期选择器：date

<mx-list-picker mode="date" />

• 省市区选择器：region

<mx-list-picker mode="region" />

数据项 options

属性：options，数据配置项，必填。

参数：label，选择项名称，必填。

当 mode="selector" 普通选择器时为一维数组。

当 mode="multiSelector" 多列选择器时为二维数组。

• 普通选择器

// js
data: {
    options: [
        {label: '名称'}
    ]
}

<mx-list-picker mode="selector" options="{{options}}" />

• 多列选择器

// js
data: {
    options: [
        [
            {label: '第一列'},
        ],
        [
            {label: '第二列'},
        ]
    ]
}

<mx-list-picker mode="multiSelector" options="{{options}}" />

key值 rangeKey

属性：rangeKey，默认 label，建议不要更改。

当选择器类型为 mode="selector" 或 mode="multiSelector" 有效。

<mx-list-picker rangeKey="label" />

普通选择器下标 index

属性：index，从 0 开始的下标值。

当选择器类型为 mode="selector" 有效。

<mx-list-picker index="1" />

多列选择器下标值 multiIndex

属性：multiIndex，每一列都是从 0 开始的下标值，数组形式。

当选择器类型为 mode="multiSelector" 有效。

// js
data: {
    multiIndex: [1, 2]
}

<mx-list-picker multiIndex="{{multiIndex}}" />

时间 time

属性：time，时间值，格式为 hh:mm。

当选择器类型为 mode="time" 有效。

<mx-list-picker time="13:14" />

日期 date

属性：date，日期值，格式为 YYYY-MM-DD。

当选择器类型为 mode="date" 有效。

<mx-list-picker date="2024-05-20" />

开始时间/开始日期 start

• 时间选择器

属性：start，时间值，格式为 hh:mm。

当选择器类型为 mode="time" 有效。

<mx-list-picker start="13:14" />

• 日期选择器

属性：start，日期值，格式为 YYYY-MM-DD。

当选择器类型为 mode="date" 有效。

<mx-list-picker start="2024-05-20" />

结束时间/结束日期 end

• 时间选择器

属性：end，时间值，格式为 hh:mm。

当选择器类型为 mode="time" 有效。

<mx-list-picker end="13:14" />

• 日期选择器

属性：end，日期值，格式为 YYYY-MM-DD。

当选择器类型为 mode="date" 有效。

<mx-list-picker end="2024-05-20" />

日期选择器粒度 fields

属性：fields，可选 year 年、month 月、day 天，默认 day，默认粒度为天。

• 年

<mx-list-picker fields="year" />

• 年月

<mx-list-picker fields="month" />

• 年月日

<mx-list-picker fields="day" />

省市区选择器值 region

属性：region，数组。

当选择器类型为 mode="region" 有效。

// js
data: {
    region: ['浙江省', '杭州市', '西湖区']
}

<mx-list-picker region="{{region}}" />

省市区选择器层级 level

属性：level，可选 province 省级选择器、city 市级选择器、region 区级选择器、sub-district 街道选择器，默认 region，默认层级为区级。

当选择器类型为 mode="region" 有效。

• 省级选择器

<mx-list-picker level="province" />

• 市级选择器

<mx-list-picker level="city" />

• 区级选择器

<mx-list-picker level="region" />

• 街道选择器

<mx-list-picker level="sub-district" />

占位文本 placeholder

属性：placeholder，默认 请选择。

<mx-list-picker placeholder="请选择内容" />

占位文本颜色 placeholderColor

属性：placeholderColor，默认 #9AA0B1，支持任何合法的颜色值。

<mx-list-picker placeholderColor="#1677FF" />

文本色 textColor

属性：textColor，默认 #040A23，支持任何合法的颜色值。

<mx-list-picker textColor="#1677FF" />

是否禁用 disabled

属性：disabled，默认 false，默认不禁用。

• 禁用

<mx-list-picker />

<mx-list-picker disabled="{{true}}" />

• 不禁用

<mx-list-picker />

<mx-list-picker disabled="{{false}}" />

右侧内容是否居左 isLeft

属性：isLeft，默认 false，默认居右。

当 styleType == 'horizontal' 时有效。

• 居左

<mx-list-picker isLeft />

<mx-list-picker isLeft="{{true}}" />

• 居右

<mx-list-picker />

<mx-list-picker isLeft="{{false}}" />

左侧自定义宽度 leftWidth

属性：leftWidth，数字，不带单位，默认使用rpx。

当 styleType == 'horizontal' 和 styleType == 'web' 时有效。

<mx-list-picker leftWidth="200" />

标签文案 label

属性：label，标签内容。

<mx-list-picker label="标签" />

标签文案文本色 labelColor

属性：labelColor，默认 #040A23，支持任何合法的颜色值。

<mx-list-picker labelColor="#1677FF" />

文案对齐方式 labelAlign

属性：labelAlign，可选值：left、center、right，默认 left，左对齐。

需要配合 label 属性一起使用

• 左对齐

<mx-list-picker />

<mx-list-picker labelAlign="left" />

• 居中对齐

<mx-list-picker labelAlign="center" />

• 右对齐

<mx-list-picker labelAlign="right" />

是否显示必填星号 required

属性：required，默认值 false 不显示必填星号。

• 显示星号

<mx-list-picker required />

<mx-list-picker required="{{true}}" />

• 不显示星号

<mx-list-picker required="{{false}}" />

<mx-list-picker />

必填星号位置 requiredPosition

属性：requiredPosition，可选值 left、right，默认值 right 在标签文本后面。

• 星号在标签后

<mx-list-picker required />

<mx-list-picker required requiredPosition />

<mx-list-picker required requiredPosition="right" />

• 星号在标签前

<mx-list-picker required requiredPosition="left" />

标签前图标 firstIcon

属性：firstIcon，对象，可以自定义图标或图片，自定义图标大小和颜色。

参数：iconName，图标名称，只支持图标库的图标。

参数：iconColor，图标颜色，默认 #040A23，支持任何合法的颜色值。

参数：iconUrl，自定义图片地址，传入则不使用 iconName 和 iconColor。

参数：iconSize，图标/图片支持设置大小，默认 48，不带单位，默认使用 rpx。

事件：bind:list_picker_firstIcon，标签前图标点击事件。

// js
data: {
    firstIcon: {
        iconName: '图标名',
        iconColor: '#1677FF',
        iconUrl: 'https://cdn.mingsixue.com/xcx/MXWUI/hot.png',
        iconSize: 48
    },
}

<mx-list-picker firstIcon="{{firstIcon}}" bind:list_picker_firstIcon="事件函数" />

标签后图标 lastIcon

属性：lastIcon，对象，可以自定义图标或图片，自定义图标大小和颜色。

参数：iconName，图标名称，只支持图标库的图标。

参数：iconColor，图标颜色，默认 #9AA0B1，支持任何合法的颜色值。

参数：iconUrl，自定义图片地址，传入则不使用 iconName 和 iconColor。

参数：iconSize，图标/图片支持设置大小，默认 32，不带单位，默认使用 rpx。

事件：bind:list_picker_lastIcon，标签后图标点击事件。

// js
data: {
    lastIcon: {
        iconName: '图标名',
        iconColor: '#1677FF',
        iconUrl: 'https://cdn.mingsixue.com/xcx/MXWUI/hot.png',
        iconSize: 32
    },
}

<mx-list-picker lastIcon="{{lastIcon}}" bind:list_picker_lastIcon="事件函数" />

是否显示右箭头 arrows

属性：arrows，默认值 true 显示右箭头。

• 显示右箭头

<mx-list-picker />

<mx-list-picker arrows />

<mx-list-picker arrows="{{true}}" />

• 不显示右箭头

<mx-list-picker arrows="{{false}}" />

描述或错误文案 desc

属性：desc，描述文案。

<mx-list-picker desc="描述文案" />

描述或错误文案颜色 descColor

属性：descColor，默认 #656979，支持任何合法的颜色值。

<mx-list-picker descColor="#1677FF" />

是否显示分隔线 showLine

属性：showLine，默认值 true 显示分隔线，用于区域之间的分隔。

只在 styleType 为 horizontal 时有效，vertical 和 web 时在样式设计上没有分隔线，所以不需要。

• 显示分隔线

<mx-list-picker />

<mx-list-picker showLine />

<mx-list-picker showLine="{{true}}" />

• 不显示分隔线

<mx-list-picker showLine="{{false}}" />

背景色 bgColor

属性：bgColor，默认 #FFFFFF，支持任何合法的颜色值。

当 styleType == 'vertical' 和 styleType == 'web' 时有效。

<mx-list-picker bgColor="#1677FF" />

是否横向布局 horizontal

属性：horizontal，默认值 false，默认纵向布局。

当 styleType == 'web' 时有效。

• 横向

<mx-list-picker horizontal />

<mx-list-picker horizontal="{{true}}" />

• 纵向

<mx-list-picker />

<mx-list-picker horizontal="{{false}}" />

自定义事件

事件：bind:list_picker_change，值变更事件，返回值 event.detail.type，普通选择器返回 event.detail.value，多列选择器返回 event.detail.multiIndex，时间选择器返回 event.detail.time，日期选择器返回 event.detail.date，省市区选择器返回 event.detail.region 和 event.detail.value。

事件：bind:list_picker_cancel，取消事件回调。

事件：bind:list_picker_column_change，列值变更事件，返回值 event.detail.column 和 event.detail.value。

事件：bind:list_picker_firstIcon，标签前图标点击事件。

事件：bind:list_picker_lastIcon，标签后图标点击事件。

<mx-list-picker 
    bind:list_picker_change="handleChange" 
    bind:list_picker_cancel="handleCancel" 
    bind:list_picker_column_change="handleColumnChange" 
    bind:list_picker_firstIcon="handleFirstIcon" 
    bind:list_picker_lastIcon="handleLastIcon" 
/>

参数

styleType="horizontal"

styleType="vertical"

styleType="web"

mode="selector"

mode="multiSelector"

mode="time"

mode="date"

mode="region"

firstIcon

lastIcon

事件

其他说明

无