阅读(1973) 赞(11)

百度智能小程序底部弹起的滚动选择器

2020-08-11 17:37:17 更新

picker 底部弹起的滚动选择器

解释：从底部弹起的滚动选择器。现支持五种选择器，通过 mode 来区分，分别是时间选择器、日期选择器、普通选择器、多列选择器以及省市区选择器，默认是普通选择器。

属性说明

属性	类型	默认值	必填	说明
mode	String	selector	否	选择器类型。
disabled	Boolean	false	否	是否禁用。
bindcancel	EventHandle		否	取消选择或点击遮罩层收起 picker 时触发。

除去上述通用属性外，针对不同的 mode，picker 组件还提供有其他不同的属性，详细介绍见下。

mode 的有效值

值	说明
selector	普通选择器
time	时间选择器
date	日期选择器
multiSelector	多列选择器
region	省市区选择器

普通选择器：mode = selector

属性名	类型	默认值	说明
range	Array \| Array.<object>	[]	mode 为 selector 或 multiSelector 时，range 有效。
range-key	String		当 range 是一个 Array.<object> 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容。
value	Number	0	value 的值表示选择了 range 中的第几个（下标从 0 开始）。
bindchange	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}。
title	String		选择器标题（仅安卓有效）默认值为 “设置”；基础库 3.110.3 及以上废弃。

时间选择器：mode = time

属性名	类型	说明
value	String	表示选中的时间，格式为 “hh:mm”。
start	String	表示有效时间范围的开始，字符串格式为 “hh:mm”。
end	String	表示有效时间范围的结束，字符串格式为 “hh:mm”。
bindchange	EventHandle	value 改变时触发 change 事件，event.detail = {value: value}。

日期选择器：mode = date

属性名	类型	默认值	说明
value	String	当前日期	表示选中的日期，格式为 “YYYY-MM-DD”。
start	String		表示有效日期范围的开始，字符串格式为 “YYYY-MM-DD”。
end	String		表示有效日期范围的结束，字符串格式为 “YYYY-MM-DD”。
fields	String	day	有效值 year、 month、 day，表示选择器的粒度。
bindchange	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}。

fields 有效值

值	说明
year	选择器粒度为年。
month	选择器粒度为月。
day	选择器粒度为天。

多列选择器：mode = multiSelector

属性名	类型	默认值	说明
range	二维 Array \| Array.<object>	[]	mode 为 selector 或 multiSelector 时， range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[[“a”,“b”], [“c”,“d”]]。
range-key	String		当 range 是一个二维 Array.<object> 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容。
value	Array	[]	value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始）。
bindcolumnchange	EventHandle		某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从 0 开始），value 的值表示变更值的下标。
bindchange	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}。
title	String		选择器标题（仅安卓有效）默认值为 "设置；基础库 3.110.3 及以上废弃。

省市区选择器：mode = region

属性名	类型	默认值	说明
value	Array	[]	表示选中的省市区，默认选中每一列的第一个值。
custom-item	String		可为每一列的顶部添加一个自定义的项。
bindchange	EventHandle		value 改变时触发 change 事件，event.detail = {value}，暂不支持统计用区划代码（code）、邮政编码（postcode）。
title	String		选择器标题（仅安卓有效）默认值为 “设置”；基础库 3.110.3 及以上废弃。

示例

在开发者工具中打开

代码示例 1：普通选择器

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>普通选择器</view>
            <view>mode="selector"</view>
        </view>
        <view class="section" hover-class="section-active">
            <picker mode="selector" 
                    value="{{arrIndex}}" 
                    range="{{selector}}"
                    range-key="name"
                    bind:change="selectorChange">
                <view class="picker">
                    <text class="chooseItem">请选择:</text>{{selector[arrIndex].name}}
                </view>
            </picker>
        </view>
    </view>
</view>

Page({
    data: {
        selector: [{
            id: '1',
            name:'选项一'
        }, {
            id: '2',
            name:'选项二'
        }, {
            id: '3',
            name:'选项三'
        }],
        rangeKey: ['选项一'],
        arrIndex: 0
    },
    selectorChange(e) {
        console.log('picker-selector changed，值为', e.detail.value);
        this.setData('arrIndex', e.detail.value);
    }
});

代码示例 2：时间选择器

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>时间选择器</view>
            <view>mode="time"</view>
        </view>
        <view class="section" hover-class="section-active">
            <picker mode="time" 
                    value="{{time}}" 
                    start="1:01" 
                    end="22:59"
                    bind:change="timeChange"
                    disabled="false">
                <view class="picker">
                    <text class="chooseItem">请选择时间:</text>{{time}}
                </view>
            </picker>
        </view>
    </view>
</view>

Page({
    data: {
        time: '12:12'
    },
    timeChange(e) {
        console.log('picker-time changed，值为', e.detail.value);
        this.setData(
            'time', e.detail.value
        );
    }
});

代码示例 3 ：日期选择器

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>日期选择器</view>
            <view>mode="date"</view>
        </view>
        <view class="section date-section" hover-class="section-active">
            <picker mode="date" 
                    value="{{dateDay}}"
                    bind:change="dateChangeDay"
                    fields="day">
                <view>
                    <text class="chooseItem">请选择日期:</text>{{dateDay}}
                </view>
            </picker>
        </view>
    </view>
</view>

Page({
    data: {
        dateDay: '2018-01-05'
    },
    dateChangeDay(e) {
        console.log('picker-date changed，值为', e.detail.value);
        this.setData(
            'dateDay', e.detail.value
        );
    }
});

代码示例 4 ：多列选择器

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>多列选择器</view>
            <view>mode="multiSelector"</view>
        </view>
        <view class="section date-section" hover-class="section-active">
            <picker mode="multiSelector" 
                    bindchange="bindMultiPickerChange"           
                    bindcolumnchange="bindMultiPickerColumnChange"                     
                    value="{{multiIndex}}" 
                    range="{{multiArray}}" 
                    title="多列选择器">
                <view class="picker">
                    <text class="chooseItem">请选择:</text>{{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[1]]}} {{multiArray[2][multiIndex[2]]}}
                </view>
            </picker>
        </view>
    </view>
</view>

Page({
    data: {
        multiIndex: [0, 0, 0],
        multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']]
    },
    bindMultiPickerChange: function (e) {
        console.log('picker-multiSelector changed，值为', e.detail.value)
        this.setData(
            'multiIndex', e.detail.value
        );
    },
    bindMultiPickerColumnChange: function (e) {
        console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
        var data = {
            multiArray: this.getData('multiArray'),
            multiIndex: this.getData('multiIndex')
        };
        data.multiIndex[e.detail.column] = e.detail.value;
        switch (e.detail.column) {
            case 0:
                switch (data.multiIndex[0]) {
                    case 0:
                        data.multiArray[1] = ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'];
                        data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
                        break;
                    case 1:
                        data.multiArray[1] = ['鱼', '两栖动物', '爬行动物'];
                        data.multiArray[2] = ['鲫鱼', '带鱼'];
                        break;
                }
                data.multiIndex[1] = 0;
                data.multiIndex[2] = 0;
                break;
            case 1:
                switch (data.multiIndex[0]) {
                    case 0:
                        switch (data.multiIndex[1]) {
                            case 0:
                                data.multiArray[2] = ['猪肉绦虫', '吸血虫'];
                                break;
                            case 1:
                                data.multiArray[2] = ['蛔虫'];
                                break;
                            case 2:
                                data.multiArray[2] = ['蚂蚁', '蚂蟥'];
                                break;
                            case 3:
                                data.multiArray[2] = ['河蚌', '蜗牛', '蛞蝓'];
                                break;
                            case 4:
                                data.multiArray[2] = ['昆虫', '甲壳动物', '蛛形动物', '多足动物'];
                                break;
                        }
                        break;
                    case 1:
                        switch (data.multiIndex[1]) {
                            case 0:
                                data.multiArray[2] = ['鲫鱼', '带鱼'];
                                break;
                            case 1:
                                data.multiArray[2] = ['青蛙', '娃娃鱼'];
                                break;
                            case 2:
                                data.multiArray[2] = ['蜥蜴', '龟', '壁虎'];
                                break;
                        }
                        break;
                }
                data.multiIndex[2] = 0;
                break;
        }
        this.setData('multiArray', data.multiArray);
        this.setData('multiIndex', data.multiIndex);
    }
});

代码示例 5 ：省市区选择器

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>省市区选择器</view>
            <view>mode="region"</view>
        </view>
        <view class="section" hover-class="section-active">
            <picker mode="region"                 
                    bind:change="regionChange" 
                    custom-item="{{customItem}}" 
                    title="地区选择器">
                <view class="picker">
                    <text class="chooseItem">请选择地区:</text>{{regionData[0]}} {{regionData[1]}} {{regionData[2]}}
                </view>
            </picker>
        </view>
    </view>
</view>

Page({
    data: {
        regionData: ['全部', '全部', '全部']
    },
    regionChange(e) {
        this.setData(
            'regionData', e.detail.value
        );
        console.log('picker-time changed，值为', e.detail.value);
    }
});

代码示例 6：设置禁用

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>设置禁用</view>
            <view>disabled</view>
        </view>
        <view class="section" hover-class="section-active">
            <picker mode="selector" 
                    class="disabled" 
                    value="{{arrIndex}}" 
                    range="{{selector}}"
                    range-key="name"
                    disabled>
                <view class="picker">
                    <text class="chooseItem">请选择:</text>{{selector[arrIndex].name}}
                </view>
            </picker>
        </view>
    </view>
</view>

代码示例 7：取消选择时触发提示

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>取消选择时触发提示</view>
            <view>bindcancel</view>
        </view>
        <view class="section" hover-class="section-active">
            <picker mode="selector" 
                    value="{{arrIndex}}" 
                    range="{{selector}}" 
                    range-key="name"
                    bind:change="selectorChange"
                    bind:cancel="cancel">
                <view class="picker">
                    <text class="chooseItem">请选择:</text>{{selector[arrIndex].name}}
                </view>
            </picker>
        </view>
    </view>
</view>

Page({
    data: {
        arrIndex: 0,
        selector: ['选项一', '选项二', '选项三']
    },
    selectorChange(e) {
        console.log('picker-selector changed，值为', e.detail.value);
        this.setData('arrIndex', e.detail.value);
    },
    cancel() {
        swan.showToast({
            title: '用户取消选择',
            icon: 'none'
        });
    }
});

Bug & Tip

Tip：基础库版本 11.15 以下：picker 组件在 iOS 系统中从底部弹出，在安卓系统中从中间弹出。
Tip：基础库版本 11.15 及以上：picker 组件双端都是从底部弹出。

← 百度智能小程序表单组件标签

百度智能小程序滚动选择器 →

百度智能小程序 底部弹起的滚动选择器