百度智能小程序 底部彈起的滾動選擇器

2020-08-28 15:42 更新

picker 底部彈起的滾動選擇器

解釋：從底部彈起的滾動選擇器?，F(xiàn)支持五種選擇器，通過 mode 來區(qū)分，分別是時間選擇器、日期選擇器、普通選擇器、多列選擇器以及省市區(qū)選擇器，默認(rèn)是普通選擇器。

屬性說明

屬性 類型 默認(rèn)值 必填 說明
mode String selector 否 選擇器類型。
disabled Boolean false 否 是否禁用。
bindcancel EventHandle 否 取消選擇或點(diǎn)擊遮罩層收起 picker 時觸發(fā)。
除去上述通用屬性外，針對不同的 mode，picker 組件還提供有其他不同的屬性，詳細(xì)介紹見下。

mode 的有效值

值 說明
selector 普通選擇器
time 時間選擇器
date 日期選擇器
multiSelector 多列選擇器
region 省市區(qū)選擇器

普通選擇器：mode = selector

屬性名 類型 默認(rèn)值 說明
range Array | Array.<object> [] mode 為 selector 或 multiSelector 時，range 有效。
range-key String 當(dāng) range 是一個 Array.<object> 時，通過 range-key 來指定 Object 中 key 的值作為選擇器顯示內(nèi)容。
value Number 0 value 的值表示選擇了 range 中的第幾個（下標(biāo)從 0 開始）。
bindchange EventHandle value 改變時觸發(fā) change 事件，event.detail = {value: value}。
title String 選擇器標(biāo)題（僅安卓有效）默認(rèn)值為 “設(shè)置”；基礎(chǔ)庫 3.110.3 及以上廢棄。

時間選擇器：mode = time

屬性名 類型 默認(rèn)值 說明
value String 表示選中的時間，格式為 “hh:mm”。
start String 表示有效時間范圍的開始，字符串格式為 “hh:mm”。
end String 表示有效時間范圍的結(jié)束，字符串格式為 “hh:mm”。
bindchange EventHandle value 改變時觸發(fā) change 事件，event.detail = {value: value}。

日期選擇器：mode = date

屬性名 類型 默認(rèn)值 說明
value String 當(dāng)前日期 表示選中的日期，格式為 “YYYY-MM-DD”。
start String 表示有效日期范圍的開始，字符串格式為 “YYYY-MM-DD”。
end String 表示有效日期范圍的結(jié)束，字符串格式為 “YYYY-MM-DD”。
fields String day 有效值 year、 month、 day，表示選擇器的粒度。
bindchange EventHandle value 改變時觸發(fā) change 事件，event.detail = {value: value}。

fields 有效值

值 說明
year 選擇器粒度為年。
month 選擇器粒度為月。
day 選擇器粒度為天。

多列選擇器：mode = multiSelector

屬性名 類型 默認(rèn)值 說明
range 二維 Array | Array.<object> [] mode 為 selector 或 multiSelector 時， range 有效。二維數(shù)組，長度表示多少列，數(shù)組的每項表示每列的數(shù)據(jù)，如[[“a”,“b”], [“c”,“d”]]。
range-key String 當(dāng) range 是一個二維 Array.<object> 時，通過 range-key 來指定 Object 中 key 的值作為選擇器顯示內(nèi)容。
value Array [] value 每一項的值表示選擇了 range 對應(yīng)項中的第幾個（下標(biāo)從 0 開始）。
bindcolumnchange EventHandle 某一列的值改變時觸發(fā) columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改變了第幾列（下標(biāo)從 0 開始），value 的值表示變更值的下標(biāo)。
bindchange EventHandle value 改變時觸發(fā) change 事件，event.detail = {value: value}。
title String 選擇器標(biāo)題（僅安卓有效）默認(rèn)值為 "設(shè)置；基礎(chǔ)庫 3.110.3 及以上廢棄。

省市區(qū)選擇器：mode = region

屬性名 類型 默認(rèn)值 說明
value Array [] 表示選中的省市區(qū)，默認(rèn)選中每一列的第一個值。
custom-item String 可為每一列的頂部添加一個自定義的項。
bindchange EventHandle value 改變時觸發(fā) change 事件，event.detail = {value}， 暫不支持統(tǒng)計用區(qū)劃代碼（code）、郵政編碼（postcode）。
title String 選擇器標(biāo)題（僅安卓有效）默認(rèn)值為 “設(shè)置”；基礎(chǔ)庫 3.110.3 及以上廢棄。

示例 

在開發(fā)者工具中打開


代碼示例 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: [['無脊柱動物', '脊柱動物'], ['扁性動物', '線形動物', '環(huán)節(jié)動物', '軟體動物', '節(jié)肢動物'], ['豬肉絳蟲', '吸血蟲']]
    },
    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] = ['扁性動物', '線形動物', '環(huán)節(jié)動物', '軟體動物', '節(jié)肢動物'];
                        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 ：省市區(qū)選擇器

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>省市區(qū)選擇器</view>
            <view>mode="region"</view>
        </view>
        <view class="section" hover-class="section-active">
            <picker mode="region"                 
                    bind:change="regionChange" 
                    custom-item="{{customItem}}" 
                    title="地區(qū)選擇器">
                <view class="picker">
                    <text class="chooseItem">請選擇地區(qū):</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：設(shè)置禁用

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>設(shè)置禁用</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：取消選擇時觸發(fā)提示

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>取消選擇時觸發(fā)提示</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：基礎(chǔ)庫版本 11.15 以下：picker 組件在 iOS 系統(tǒng)中從底部彈出，在安卓系統(tǒng)中從中間彈出。
  • Tip：基礎(chǔ)庫版本 11.15 及以上：picker 組件雙端都是從底部彈出。


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號