建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
創(chuàng)新互聯(lián)百度小程序教程：picker底部彈起的滾動(dòng)選擇器
- picker 底部彈起的滾動(dòng)選擇器
- 屬性說(shuō)明
- mode 的有效值
- 普通選擇器：mode = selector
- 時(shí)間選擇器：mode = time
- 日期選擇器：mode = date
- 多列選擇器：mode = multiSelector
- 省市區(qū)選擇器：mode = region
- 示例
- 代碼示例 1：普通選擇器
- 代碼示例 2：時(shí)間選擇器
- 代碼示例 3：日期選擇器
- 代碼示例 4：多列選擇器
- 代碼示例 5：省市區(qū)選擇器
- 代碼示例 6：設(shè)置禁用
- 代碼示例 7：取消選擇時(shí)觸發(fā)提示
- Bug & Tip
- 屬性說(shuō)明
picker 底部彈起的滾動(dòng)選擇器
解釋：從底部彈起的滾動(dòng)選擇器?，F(xiàn)支持五種選擇器，通過(guò) mode 來(lái)區(qū)分，分別是時(shí)間選擇器、日期選擇器、普通選擇器、多列選擇器以及省市區(qū)選擇器，默認(rèn)是普通選擇器。如需級(jí)聯(lián)選擇功能，可使用 Smart UI 組件，詳見 cascade 級(jí)聯(lián)。
屬性說(shuō)明
| 屬性 | 類型 | 默認(rèn)值 | 必填 | 說(shuō)明 |
|---|---|---|---|---|
| mode | String | selector | 否 | 選擇器類型 |
| disabled | Boolean | false | 否 | 是否禁用 |
| bindcancel | EventHandle | 否 | 取消選擇或點(diǎn)擊遮罩層收起 picker 時(shí)觸發(fā) |
除去上述通用屬性外，針對(duì)不同的 mode，picker 組件還提供有其他不同的屬性，詳細(xì)介紹見下。
mode 的有效值
| 值 | 說(shuō)明 |
|---|---|
| selector | 普通選擇器 |
| time | 時(shí)間選擇器 |
| date | 日期選擇器 |
| multiSelector | 多列選擇器 |
| region | 省市區(qū)選擇器 |
普通選擇器：mode = selector
| 屬性名 | 類型 | 默認(rèn)值 | 說(shuō)明 |
|---|---|---|---|
| range | Array/Array. | [] | mode 為 selector 或 multiSelector 時(shí)，range 有效 |
| range-key | String | 當(dāng) range 是一個(gè) Array. | |
| value | Number | 0 | value 的值表示選擇了 range 中的第幾個(gè)（下標(biāo)從 0 開始） |
| bindchange | EventHandle | value 改變時(shí)觸發(fā) change 事件， event.detail = {value: value} |
|
| title | String | 選擇器標(biāo)題，建議標(biāo)題控制在 12 個(gè)中文漢字長(zhǎng)度內(nèi)，避免出現(xiàn)截?cái)喱F(xiàn)象, 截?cái)嗖糠謱⒁?… 形式展示 |
時(shí)間選擇器：mode = time
| 屬性名 | 類型 | 默認(rèn)值 | 說(shuō)明 |
|---|---|---|---|
| value | String | 表示選中的時(shí)間，格式為“hh:mm” |
|
| start | String | 表示有效時(shí)間范圍的開始，字符串格式為“hh:mm” |
|
| end | String | 表示有效時(shí)間范圍的結(jié)束，字符串格式為“hh:mm” |
|
| bindchange | EventHandle | value 改變時(shí)觸發(fā) change 事件， event.detail = {value: value} |
|
| title | String | 選擇器標(biāo)題，建議標(biāo)題控制在 12 個(gè)中文漢字長(zhǎng)度內(nèi)，避免出現(xiàn)截?cái)喱F(xiàn)象, 截?cái)嗖糠謱⒁?… 形式展示 |
日期選擇器：mode = date
| 屬性名 | 類型 | 默認(rèn)值 | 說(shuō)明 |
|---|---|---|---|
| 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 改變時(shí)觸發(fā) change 事件， event.detail = {value: value} |
|
| title | String | 選擇器標(biāo)題，建議標(biāo)題控制在 12 個(gè)中文漢字長(zhǎng)度內(nèi)，避免出現(xiàn)截?cái)喱F(xiàn)象, 截?cái)嗖糠謱⒁?… 形式展示 |
fields 有效值
| 值 | 說(shuō)明 |
|---|---|
| year | 選擇器粒度為年 |
| month | 選擇器粒度為月 |
| day | 選擇器粒度為天 |
多列選擇器：mode = multiSelector
| 屬性名 | 類型 | 默認(rèn)值 | 說(shuō)明 |
|---|---|---|---|
| range | Array/Array. | [] | mode 為 selector 或 multiSelector 時(shí)， range 有效。二維數(shù)組，長(zhǎng)度表示多少列，數(shù)組的每項(xiàng)表示每列的數(shù)據(jù)，如[[“a”,”b”], [“c”,”d”]]。 |
| range-key | String | 當(dāng) range 是一個(gè)二維 Array. | |
| value | Array | [] | value 每一項(xiàng)的值表示選擇了 range 對(duì)應(yīng)項(xiàng)中的第幾個(gè)（下標(biāo)從 0 開始） |
| bindcolumnchange | EventHandle | 某一列的值改變時(shí)觸發(fā) columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改變了第幾列（下標(biāo)從 0 開始），value 的值表示變更值的下標(biāo) |
|
| bindchange | EventHandle | value 改變時(shí)觸發(fā) change 事件，event.detail = {value: value} |
|
| title | String | 選擇器標(biāo)題，建議標(biāo)題控制在 12 個(gè)中文漢字長(zhǎng)度內(nèi)，避免出現(xiàn)截?cái)喱F(xiàn)象, 截?cái)嗖糠謱⒁?… 形式展示 |
省市區(qū)選擇器：mode = region
| 屬性名 | 類型 | 默認(rèn)值 | 說(shuō)明 |
|---|---|---|---|
| value | Array | [] | 表示選中的省市區(qū)，默認(rèn)選中每一列的第一個(gè)值 |
| custom-item | String | 可為每一列的頂部添加一個(gè)自定義的項(xiàng) | |
| bindchange | EventHandle | value 改變時(shí)觸發(fā) change 事件，event.detail = {value}，暫不支持統(tǒng)計(jì)用區(qū)劃代碼（code）、郵政編碼（postcode） |
|
| title | String | 選擇器標(biāo)題，建議標(biāo)題控制在 12 個(gè)中文漢字長(zhǎng)度內(nèi)，避免出現(xiàn)截?cái)喱F(xiàn)象, 截?cái)嗖糠謱⒁?… 形式展示 |
示例
跳轉(zhuǎn)編輯工具
在開發(fā)者工具中打開
在 WEB IDE 中打開
掃碼體驗(yàn)
代碼示例
請(qǐng)使用百度APP掃碼
代碼示例 1：普通選擇器
- SWAN
- JS
普通選擇器 mode="selector" value="{{arrIndex}}"range="{{selector}}"range-key="name"title="選擇器標(biāo)題"bind:change="selectorChange">請(qǐng)選擇: {{selector[arrIndex].name}}
Page({data: {selector: [{id: '1',name:'選項(xiàng)一'}, {id: '2',name:'選項(xiàng)二'}, {id: '3',name:'選項(xiàng)三'}],rangeKey: ['選項(xiàng)一'],arrIndex: 0},selectorChange(e) {console.log('picker-selector changed，值為', e.detail.value);this.setData('arrIndex', e.detail.value);}});
代碼示例 2：時(shí)間選擇器
- SWAN
- JS
時(shí)間選擇器 mode="time" value="{{time}}"start="1:01"end="22:59"bind:change="timeChange"disabled="false">請(qǐng)選擇時(shí)間: {{time}}
Page({data: {time: '12:12'},timeChange(e) {console.log('picker-time changed，值為', e.detail.value);this.setData('time', e.detail.value);}});
代碼示例 3：日期選擇器
- SWAN
- JS
日期選擇器 mode="date" value="{{dateDay}}"bind:change="dateChangeDay"fields="day">請(qǐng)選擇日期: {{dateDay}}
Page({data: {dateDay: '2018-01-05'},dateChangeDay(e) {console.log('picker-date changed，值為', e.detail.value);this.setData('dateDay', e.detail.value);}});
代碼示例 4：多列選擇器
- SWAN
- JS
多列選擇器 mode="multiSelector" bindchange="bindMultiPickerChange"bindcolumnchange="bindMultiPickerColumnChange"value="{{multiIndex}}"range="{{multiArray}}"title="多列選擇器">請(qǐng)選擇: {{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[1]]}} {{multiArray[2][multiIndex[2]]}}
Page({data: {multiIndex: [0, 0, 0],multiArray: [['無(wú)脊柱動(dòng)物', '脊柱動(dòng)物'], ['扁性動(dòng)物', '線形動(dòng)物', '環(huán)節(jié)動(dòng)物', '軟體動(dòng)物', '節(jié)肢動(dòng)物'], ['豬肉絳蟲', '吸血蟲']]},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] = ['扁性動(dòng)物', '線形動(dòng)物', '環(huán)節(jié)動(dòng)物', '軟體動(dòng)物', '節(jié)肢動(dòng)物'];data.multiArray[2] = ['豬肉絳蟲', '吸血蟲'];break;case 1:data.multiArray[1] = ['魚', '兩棲動(dòng)物', '爬行動(dòng)物'];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] = ['昆蟲', '甲殼動(dòng)物', '蛛形動(dòng)物', '多足動(dòng)物'];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ū)選擇器
- SWAN
- JS
省市區(qū)選擇器 mode="region" bind:change="regionChange"custom-item="{{customItem}}"title="地區(qū)選擇器">請(qǐng)選擇地區(qū): {{regionData[0]}} {{regionData[1]}} {{regionData[2]}}
Page({data: {regionData: ['全部', '全部', '全部']},regionChange(e) {this.setData('regionData', e.detail.value);console.log('picker-time changed，值為', e.detail.value);}});
代碼示例 6：設(shè)置禁用
- SWAN
設(shè)置禁用 disabled class="disabled"value="{{arrIndex}}"range="{{selector}}"range-key="name"disabled>請(qǐng)選擇: {{selector[arrIndex].name}}
代碼示例 7：取消選擇時(shí)觸發(fā)提示
- SWAN
- JS
取消選擇時(shí)觸發(fā)提示 bindcancel value="{{arrIndex}}"range="{{selector}}"range-key="name"bind:change="selectorChange"bind:cancel="cancel">請(qǐng)選擇: {{selector[arrIndex].name}}
Page({data: {arrIndex: 0,selector: ['選項(xiàng)一', '選項(xiàng)二', '選項(xiàng)三']},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ǔ)庫(kù)版本 11.15 以下：picker 組件在 iOS 系統(tǒng)中從底部彈出，在安卓系統(tǒng)中從中間彈出。
-
Tip：基礎(chǔ)庫(kù)版本 11.15 及以上：picker 組件雙端都是從底部彈出。
網(wǎng)頁(yè)標(biāo)題：創(chuàng)新互聯(lián)百度小程序教程：picker底部彈起的滾動(dòng)選擇器
網(wǎng)站鏈接：http://fisionsoft.com.cn/article/dhjjphe.html
