[TOC] ## picker組件 從**底部彈起**的滾動選擇器，現支持五種選擇器，通過mode來區分，分別是普通選擇器，多列選擇器，時間選擇器，日期選擇器，省市區選擇器，默認是普通選擇器 ***** <br> ### 1.普通選擇器(selector) | 屬性名 | 類型 | 默認值 | 說明 | 最低版本 | | --- | --- | --- | --- | --- | | **range** | Array / Object Array | \[\] | mode為 selector 或 multiSelector 時，range 有效 | | | **value** | Number | 0 | value 的值表示選擇了 range 中的第幾個（下標從 0 開始） | | | **bindchange** | EventHandle | | value 改變時觸發 change 事件，event.detail = {value: value} | | | disabled | Boolean | false | 是否禁用 | | | bindcancel | EventHandle | | 取消選擇或點遮罩層收起 picker 時觸發 | | <br> ``` <!-- range,綁定在選擇器中顯示的數據，是個數據 同時mode 為 selector 或 multiSelector 時，range 有效 --> <!-- value，表示選擇了 range 中的第幾個（下標從 0 開始），number型 --> <!-- bindchange 當value的值發生改變的時候會觸發這個時間 --> <picker mode = "selector" range="{{arr1}}" value = "{{index}}" bindchange = "fun1"> <button>普通選擇器</button> <!-- 將當前選擇的數據信息顯示 --> <view>當前選擇的是：{{arr1[index]}}</view> </picker> ``` ``` data: { arr1: ['美國', '中國', '巴西', '日本', '韓國', '巴西', '印度', '泰國'], index:0, }, fun1:function(e){ // picker發送選擇改變，攜帶值為 console.log( e.detail.value) this.setData({ index: e.detail.value }) }, ``` ***** ### 2. 多列選擇器(multiSelector) | 屬性名 | 類型 | 默認值 | 說明 | 最低版本 | | --- | --- | --- | --- | --- | | **range** | 二維Array / 二維Object Array | \[\] | mode為 selector 或 multiSelector 時，range 有效。二維數組，長度表示多少列，數組的每項表示每列的數據，如`[["a","b"], ["c","d"]]` | | | range-key | String | | 當 range 是一個 二維Object Array 時，通過 range-key 來指定 Object 中 key 的值作為選擇器顯示內容 | | | **value** | Array | \[\] | value 每一項的值表示選擇了 range 對應項中的第幾個（下標從 0 開始）。\[0,0\] | | | **bindchange** | EventHandle | | value 改變時觸發 change 事件，event.detail = {value: value} | | | **bindcolumnchange** | EventHandle | | 某一列的值改變時觸發 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改變了第幾列（下標從0開始），value 的值表示變更值的下標 | | | bindcancel | EventHandle | | 取消選擇時觸發 | [1.9.90](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | disabled | Boolean | false | 是否禁用 | | <br> ***** <br> ``` <picker mode="multiSelector" range="{{arr2}}" value="{{Dindex}}" bindchange="change2" bindcolumnchange="columnChange"> <button>多列選擇器</button> <view> 當前選擇：{{arr2[0][Dindex[0]]}}，{{arr2[1][Dindex[1]]}}，{{arr2[2][Dindex[2]]}} </view> </picker> ``` ``` data: { Dindex: [0, 0, 0], arr2: [['無脊柱動物', '脊柱動物'], ['扁性動物', '線形動物', '環節動物', '軟體動物', '節肢動物'], ['豬肉絳蟲', '吸血蟲']], }, /**點擊確認時回調 */ change2: function (e) { // picker發送選擇改變，攜帶值為 console.log(e.detail.value) this.setData({ Dindex: e.detail.value }) }, /** 當滾動的時候會回調*/ columnChange: function(e) { // {column:0,value:0} 代表是滾動第0列的第0個值 console.log(e.detail.value) console.log(e.detail.column) } ``` ***** <br> ### 3.時間選擇器-（time） | 屬性名 | 類型 | 默認值 | 說明 | 最低版本 | | --- | --- | --- | --- | --- | | **value** | String | | 表示**選中**的時間，格式為"hh:mm" | | | **start** | String | | 表示**有效時間范圍**的開始，字符串格式為"hh:mm" | | | **end** | String | | 表示**有效時間范圍**的結束，字符串格式為"hh:mm" | | | **bindchange** | EventHandle | | value 改變時觸發 change 事件，event.detail = {value: value} | | | bindcancel | EventHandle | | 取消選擇時觸發 | [1.9.90](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | disabled | Boolean | false | 是否禁用 | | ***** <br> ``` <picker mode="time" value="{{time}}" start="09:00" end="21:00" bindchange="bindTimeChange" > <button size='mini' type='primary'>2.時間選擇器</button> </picker> ``` ``` data: { time: '12:01', }, bindTimeChange:function(event){ console.log(event.detail) }, ``` ***** <br> ### 4.日期選擇器-date ``` <picker mode="date" start="2015-09-01" end="2020-03-16" value="{{data}}" bindchange="change3"> <button>日期選擇器</button> <view class="picker"> 當前選擇日期為：{{data}} </view> </picker> ``` ``` data: { .... data: '2016-11-22', ``` }, ``` change3: function (e) { // picker發送選擇改變，攜帶值為 console.log(e.detail.value) this.setData({ data: e.detail.value }) }, ``` ***** <br> ### 5. 省市區選擇器-region ``` <picker mode="region" bindchange="change4" value="{{region}}" custom-item="{{customItem}}"> <button>省市區選擇器</button> <view class="picker"> 當前選擇省市區為：{{region}} </view> </picker> ``` ``` data: { .... region: ['廣東省', '廣州市', '天河區'], customItem: '全部' }, change4: function (e) { console.log('picker發送選擇改變，攜帶值為', e.detail.value) this.setData({ region: e.detail.value }) }, ``` ## picker-view >嵌入頁面的滾動選擇器, 而不是從底部彈出的選擇器 注意：其中只可放置`<picker-view-column/>`組件，其他節點不會顯示。 | value | NumberArray | 數組中的數字依次表示 picker-view 內的 picker-view-column 選擇的第幾項（下標從 0 開始），數字大于 picker-view-column 可選項長度時，選擇最后一項。 | \[0,0,0\] | | --- | --- | --- | --- | | **indicator-style** | String | 設置選擇器**中間**選中框的**樣式** | | | indicator-class | String | 設置選擇器**中間**選中框的**類名** | [1.1.0](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | mask-style | String | 設置蒙層的樣式 | [1.5.0](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | mask-class | String | 設置蒙層的類名 | [1.5.0](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | **bindchange** | EventHandle | 當滾動選擇，value 改變時觸發 change 事件，event.detail = {value: value}；value為數組，表示 picker-view 內的 picker-view-column 當前選擇的是第幾項（下標從 0 開始） | | | bindpickstart | EventHandle | 當滾動選擇開始時候觸發事件 | [2.3.1](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) | | bindpickend | EventHandle | 當滾動選擇結束時候觸發事件 |