picker · 我的開發之路系列 - 微信開發指南

#### picker 從底部彈起的滾動選擇器，現支持五種選擇器，通過mode來區分，分別是普通選擇器，多列選擇器，時間選擇器，日期選擇器，省市區選擇器，默認是普通選擇器。 **普通選擇器：mode = selector** | 屬性名 | 類型 | 默認值 | 說明 | | ---------- | -------------------- | ----- | ---------------------------------------- | | range | Array / Object Array | [] | mode為 selector 或 multiSelector 時，range 有效 | | range-key | String | | 當 range 是一個 Object Array 時，通過 range-key 來指定 Object 中 key 的值作為選擇器顯示內容 | | value | Number | 0 | value 的值表示選擇了 range 中的第幾個（下標從 0 開始） | | bindchange | EventHandle | | value 改變時觸發 change 事件，event.detail = {value: value} | | disabled | Boolean | false | 是否禁用 | **多列選擇器：mode = multiSelector**（最低版本：[1.4.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html)） | 屬性名 | 類型 | 默認值 | 說明 | | ---------------- | ------------------------ | ----- | ---------------------------------------- | | 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 開始） | | bindchange | EventHandle | | value 改變時觸發 change 事件，event.detail = {value: value} | | bindcolumnchange | EventHandle | | 某一列的值改變時觸發 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改變了第幾列（下標從0開始），value 的值表示變更值的下標 | | disabled | Boolean | false | 是否禁用 | **時間選擇器：mode = time** | 屬性名 | 類型 | 默認值 | 說明 | | ---------- | ----------- | ----- | ---------------------------------------- | | value | String | | 表示選中的時間，格式為"hh:mm" | | start | String | | 表示有效時間范圍的開始，字符串格式為"hh:mm" | | end | String | | 表示有效時間范圍的結束，字符串格式為"hh:mm" | | bindchange | EventHandle | | value 改變時觸發 change 事件，event.detail = {value: value} | | disabled | Boolean | false | 是否禁用 | **日期選擇器：mode = date** | 屬性名 | 類型 | 默認值 | 說明 | | ---------- | ----------- | ----- | ---------------------------------------- | | value | String | 0 | 表示選中的日期，格式為"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} | | disabled | Boolean | false | 是否禁用 | **fields 有效值：** | 值 | 說明 | | ----- | -------- | | year | 選擇器粒度為年 | | month | 選擇器粒度為月份 | | day | 選擇器粒度為天 | **省市區選擇器：mode = region**（最低版本：[1.4.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html)） | 屬性名 | 類型 | 默認值 | 說明 | 最低版本 | | ----------- | ----------- | ----- | ---------------------------------------- | ---------------------------------------- | | value | Array | [] | 表示選中的省市區，默認選中每一列的第一個值 | | | custom-item | String | | 可為每一列的頂部添加一個自定義的項 | [1.5.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) | | bindchange | EventHandle | | value 改變時觸發 change 事件，event.detail = {value: value} | | | disabled | Boolean | false | 是否禁用 | | **示例代碼：** ``` <view class="section"> <view class="section__title">普通選擇器</view> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view class="picker"> 當前選擇：{{array[index]}} </view> </picker> </view> <view class="section"> <view class="section__title">多列選擇器</view> <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"> <view class="picker"> 當前選擇：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}} </view> </picker> </view> <view class="section"> <view class="section__title">時間選擇器</view> <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange"> <view class="picker"> 當前選擇: {{time}} </view> </picker> </view> <view class="section"> <view class="section__title">日期選擇器</view> <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"> <view class="picker"> 當前選擇: {{date}} </view> </picker> </view> <view class="section"> <view class="section__title">省市區選擇器</view> <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}"> <view class="picker"> 當前選擇：{{region[0]}}，{{region[1]}}，{{region[2]}} </view> </picker> </view> Page({ data: { array: ['美國', '中國', '巴西', '日本'], objectArray: [ { id: 0, name: '美國' }, { id: 1, name: '中國' }, { id: 2, name: '巴西' }, { id: 3, name: '日本' } ], index: 0, multiArray: [['無脊柱動物', '脊柱動物'], ['扁性動物', '線形動物', '環節動物', '軟體動物', '節肢動物'], ['豬肉絳蟲', '吸血蟲']], objectMultiArray: [ [ { id: 0, name: '無脊柱動物' }, { id: 1, name: '脊柱動物' } ], [ { id: 0, name: '扁性動物' }, { id: 1, name: '線形動物' }, { id: 2, name: '環節動物' }, { id: 3, name: '軟體動物' }, { id: 3, name: '節肢動物' } ], [ { id: 0, name: '豬肉絳蟲' }, { id: 1, name: '吸血蟲' } ] ], multiIndex: [0, 0, 0], date: '2016-09-01', time: '12:01', region: ['廣東省', '廣州市', '海珠區'], customItem: '全部' }, bindPickerChange: function(e) { console.log('picker發送選擇改變，攜帶值為', e.detail.value) this.setData({ index: e.detail.value }) }, bindMultiPickerChange: function (e) { console.log('picker發送選擇改變，攜帶值為', e.detail.value) this.setData({ multiIndex: e.detail.value }) }, bindMultiPickerColumnChange: function (e) { console.log('修改的列為', e.detail.column, '，值為', e.detail.value); var data = { multiArray: this.data.multiArray, multiIndex: this.data.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; console.log(data.multiIndex); break; } this.setData(data); }, bindDateChange: function(e) { console.log('picker發送選擇改變，攜帶值為', e.detail.value) this.setData({ date: e.detail.value }) }, bindTimeChange: function(e) { console.log('picker發送選擇改變，攜帶值為', e.detail.value) this.setData({ time: e.detail.value }) }, bindRegionChange: function (e) { console.log('picker發送選擇改變，攜帶值為', e.detail.value) this.setData({ region: e.detail.value }) } }) ``` :-: ![](http://xiaoyulive.oss-cn-beijing.aliyuncs.com/imgs/weixin/019.png)