新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案

創(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

picker 底部彈起的滾動(dòng)選擇器

解釋：從底部彈起的滾動(dòng)選擇器。現(xiàn)支持五種選擇器，通過(guò) mode 來(lái)區(qū)分，分別是時(shí)間選擇器、日期選擇器、普通選擇器、多列選擇器以及省市區(qū)選擇器，默認(rèn)是普通選擇器。如需級(jí)聯(lián)選擇功能，可使用 Smart UI 組件，詳見(jiàn) cascade 級(jí)聯(lián)。

屬性說(shuō)明

屬性	類(lèi)型	默認(rèn)值	必填	說(shuō)明
mode	String	selector	否	選擇器類(lèi)型
disabled	Boolean	false	否	是否禁用
bindcancel	EventHandle		否	取消選擇或點(diǎn)擊遮罩層收起 picker 時(shí)觸發(fā)

除去上述通用屬性外，針對(duì)不同的 mode，picker 組件還提供有其他不同的屬性，詳細(xì)介紹見(jiàn)下。

mode 的有效值

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

普通選擇器：mode = selector

屬性名	類(lèi)型	默認(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 開(kāi)始）
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

屬性名	類(lèi)型	說(shuō)明
value	String	表示選中的時(shí)間，格式為`“hh:mm”`
start	String	表示有效時(shí)間范圍的開(kāi)始，字符串格式為`“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

屬性名	類(lèi)型	默認(rèn)值	說(shuō)明
value	String	當(dāng)前日期	表示選中的日期，格式為`“YYYY-MM-DD”`
start	String		表示有效日期范圍的開(kāi)始，字符串格式為`“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

屬性名	類(lèi)型	默認(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 開(kāi)始）
bindcolumnchange	EventHandle		某一列的值改變時(shí)觸發(fā) columnchange 事件，`event.detail = {column: column, value: value}`，column 的值表示改變了第幾列（下標(biāo)從 0 開(kāi)始），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

屬性名	類(lèi)型	默認(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)編輯工具

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

在 WEB IDE 中打開(kāi)

掃碼體驗(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)物'], ['豬肉絳蟲(chóng)', '吸血蟲(chó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] = ['豬肉絳蟲(chóng)', '吸血蟲(chóng)'];  
  
   break;  
  
   case 1:  
  
   data.multiArray[1] = ['魚(yú)', '兩棲動(dòng)物', '爬行動(dòng)物'];  
  
   data.multiArray[2] = ['鯽魚(yú)', '帶魚(yú)'];  
  
   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] = ['豬肉絳蟲(chóng)', '吸血蟲(chóng)'];  
  
   break;  
  
   case 1:  
  
   data.multiArray[2] = ['蛔蟲(chóng)'];  
  
   break;  
  
   case 2:  
  
   data.multiArray[2] = ['螞蟻', '螞蟥'];  
  
   break;  
  
   case 3:  
  
   data.multiArray[2] = ['河蚌', '蝸牛', '蛞蝓'];  
  
   break;  
  
   case 4:  
  
   data.multiArray[2] = ['昆蟲(chóng)', '甲殼動(dòng)物', '蛛形動(dòng)物', '多足動(dòng)物'];  
  
   break;  
  
   }  
  
   break;  
  
   case 1:  
  
   switch (data.multiIndex[1]) {  
  
   case 0:  
  
   data.multiArray[2] = ['鯽魚(yú)', '帶魚(yú)'];  
  
   break;  
  
   case 1:  
  
   data.multiArray[2] = ['青蛙', '娃娃魚(yú)'];  
  
   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è)題目：創(chuàng)新互聯(lián)百度小程序教程：picker底部彈起的滾動(dòng)選擇器                                                

                                                文章起源：http://www.5511xx.com/article/dhjjphe.html


                                            
                                                
                                                    其他資訊
                                                
                                                
                                                    
                                                        
                                                                海外服務(wù)器被惡意攻擊了該如何解決
                                                            

                                                                Linux網(wǎng)絡(luò)控制：實(shí)現(xiàn)自動(dòng)化管理（linux網(wǎng)絡(luò)控制）
                                                            

                                                                Flink實(shí)現(xiàn)準(zhǔn)實(shí)時(shí)同步Oracle數(shù)據(jù)
                                                            

                                                                如何判斷ip比較多的香港服務(wù)器的性能
                                                            

                                                                python中sum用法