miniprogram picker
Release 1.0.7
bindcolumnchange事件，來手動更改range和value的值，從而完成Picker的連動變化，比較麻煩，不利於在不同的業務邏輯中的複用。sourceData ，再進行一些必要配置，本元件就可以自動幫助開發者處理連動邏輯。2.2.1或以上、及开发者工具1.02.1808300或以上開始，小程式支援使用npm 安裝第三方套件。 
| 屬性 | 說明 | 類型 | 預設值 | 是否必填 |
|---|---|---|---|---|
| sourceData | 來源數組，sourceData有幾維，Picker就可以有幾階。格式必須為數組和物件的集合，參考範例 | Array | [] | true |
| steps | Picker的階數 | Number | 1 | false |
| shownFieldName | 展示資料的欄位名稱 | String | '名' | false |
| subsetFieldName | 子節點的欄位名稱，此欄位的值為Picker下一階的陣列 | String | 'subset' | false |
| otherNeedFieldsName | 其他需要返回的字段，開發者可以根據需求自訂 | Array | [] | false |
| defaultIndex | 預設選取項目的下標數組，優先於defaultValue | Array | [] | false |
| defaultValue | 預設選取項目的值數組，此屬性啟用時defaultValueUniqueField為必填項 | Array | [] | false |
| defaultValueUniqueField | 預設選取項目的值數組的唯一字段，用來和來源數組進行比對 | String | '' | - |
| autoSelect | 初始化時，是否需要自動呼叫bindchange事件回傳結果給開發者 | Boolean | false | false |
| initColumnSelectedIndex | 選擇了第n列後，是否將大於n的列的選擇值自動初始化為0 | Boolean | false | false |
| disabled | 是否禁用 | Boolean | false | false |
| 方法 | 說明 | 類型 | 事件對象 |
|---|---|---|---|
| bindchange | 用戶點擊確認時觸發 | EventHandle | event.detail = {selectedIndex, selectedArray} |
| bindcancel | 用戶點擊取消時觸發 | EventHandle | event.detail為原生組件的bindcancel觸發時的event對象 |
| bindcolumnchange | 使用者滑動某一列的值改變時觸發 | EventHandle | event.detail為原生元件的bindcolumnchange觸發時的event對象 |
sourceData為來源數組，是數組物件結構的集合， sourceData有幾維，Picker就可以有幾階。steps ，你需要明確指定Picker的階數，例如三級聯動則設定steps: 3 。steps設定了3 ，那麼sourceData務必要滿足這個階數。initColumnSelectedIndex屬性啟用後，開發者偵錯工具上會有失效狀況，但目前真機沒有發現問題，所以是否開啟請開發者自行決定。bindchange觸發的事件物件：selectedIndex ：Picker選擇項的索引數組；selectedArray ：Picker選擇項目的值數組；bindchange ， bindcancel ， bindcolumnchange ， disabled 。具體可以查看原始碼。 安裝miniprogram-picker套件。
提醒：若是你不想用npm，也可以直接下載最新release包放到專案的
components中，就像用自己寫的組件那樣，只不過npm更加方便。
npm install miniprogram-picker --production
// 或者
npm install miniprogram-picker --save點選微信開發者工具中的選單列：工具--> 建立npm。此時你會發現專案中多出一個miniprogram_npm目錄，裡面有編譯過的miniprogram-picker 。
.json中引入miniprogram-picker第三方元件。使用方法與使用自己封裝的元件相同，只不過不需要寫具體路徑了，很方便。
{
"usingComponents" : {
"miniprogram-picker" : " miniprogram-picker "
}
} .wxml中使用miniprogram-picker 。我這裡給了兩個小例子，第一個是三級連動，第二個是兩級連動。具體屬性和事件方法可以參考API。
miniprogram-picker是沒有任何樣式的，具體樣式開發者可以自定義，如果你熟悉slot的用法那就更好了，具體參考小程式元件wxml的slot。
< miniprogram-picker
sourceData = " {{sourceData_1}} "
steps = " {{3}} "
shownFieldName = " {{'name'}} "
subsetFieldName = " {{'sonValue'}} "
otherNeedFieldsName = " {{['id', 'other']}} "
defaultValue = " {{[{name: '2'}, {name: '2.2'}, {name: '2.2.1'}]}} "
defaultValueUniqueField = " {{'name'}} "
autoSelect = " {{true}} "
initColumnSelectedIndex
disabled = " {{false}} "
bindchange = " pickerChange "
bindcancel = " pickerCancel "
bindcolumnchange = " pickerColumnchange "
data-picker = " picker_1 " >
< view class = " picker " >
当前选择：< view wx : for = " {{result_1}} " wx : key = " index " >{{item['name']}}</ view >
</ view >
</ miniprogram-picker >
< miniprogram-picker
sourceData = " {{sourceData_2}} "
steps = " {{2}} "
shownFieldName = " {{'name'}} "
subsetFieldName = " {{'nextLevel'}} "
otherNeedFieldsName = " {{['code']}} "
defaultValue = " {{[{code: '0110'}, {code: '011002'}]}} "
defaultValueUniqueField = " {{'code'}} "
autoSelect = " {{true}} "
initColumnSelectedIndex
disabled = " {{false}} "
bindchange = " pickerChange "
bindcancel = " pickerCancel "
bindcolumnchange = " pickerColumnchange "
data-picker = " picker_2 " >
< view class = " picker " >
当前选择：< view wx : for = " {{result_2}} " wx : key = " index " >{{item['name']}}</ view >
</ view >
</ miniprogram-picker > .js中設定sourceData和監聽pickerChange事件等。
Page ( {
/**
* 页面的初始数据
*/
data : {
result_1 : [ ] ,
result_2 : [ ] ,
sourceData_1 : [
{
id : 'id-1' ,
name : '1' ,
sonValue : [
{
id : 'id-11' ,
name : '1.1' ,
sonValue : [
{ id : 'id-111' , name : '1.1.1' } ,
{ id : 'id-112' , name : '1.1.2' }
]
} ,
{
id : 'id-12' ,
name : '1.2' ,
sonValue : [
{ id : 'id-121' , name : '1.2.1' } ,
{ id : 'id-122' , name : '1.2.2' }
]
}
]
} ,
{
id : 'id-2' ,
name : '2' ,
sonValue : [
{
id : 'id-21' ,
name : '2.1' ,
sonValue : [
{ id : 'id-211' , name : '2.1.1' } ,
{ id : 'id-212' , name : '2.1.2' }
]
} ,
{
id : 'id-22' ,
name : '2.2' ,
sonValue : [
{ id : 'id-221' , name : '2.2.1' } ,
{ id : 'id-222' , name : '2.2.2' }
]
}
]
}
] ,
sourceData_2 : [
{ name : '河北' , code : '0311' , nextLevel : [ { name : '石家庄' , code : '031101' } , { name : '保定' , code : '031102' } ] } ,
{ name : '北京' , code : '0110' , nextLevel : [ { name : '朝阳' , code : '011001' } , { name : '海淀' , code : '011002' } ] } ,
]
} ,
/**
* Picker用户点击确认时触发
*
* @param {Object} e pickerChange的事件对象
* @param {Object} e.detail.selectedIndex 用户选择的数据在数组中所在的下标
* @param {Object} e.detail.selectedArray 用户选择的数据
*/
pickerChange ( e ) {
const { picker } = e . currentTarget . dataset
const { selectedIndex , selectedArray } = e . detail
const list = {
picker_1 : 'result_1' ,
picker_2 : 'result_2' ,
}
console . log ( '多级联动结果:' , selectedIndex , selectedArray )
const change = { }
change [ list [ picker ] ] = selectedArray
this . setData ( change )
} ,
/**
* Picker用户点击取消时触发
*
* @param {Object} e pickerCancel的事件对象
* @param {Object} e.detail 是原生Picker组件的bindcancel触发时的事件对象e
*/
pickerCancel ( e ) {
console . log ( e )
} ,
/**
* Picker用户滑动某一列的值改变时触发
*
* @param {Object} e pickerColumnchange的事件对象
* @param {Object} e.detail 是原生Picker组件的bindcolumnchange触发时的事件对象e
*/
pickerColumnchange ( e ) {
console . log ( e )
} ,
} ) .wxss中簡單設定樣式。
. picker {
display : flex;
flex-direction : row;
align-items : center;
margin : 10 rpx 0 ;
padding : 10 rpx 0 ;
background-color : # DEECE2 ;
font-size : 28 rpx ;
}
. picker view {
padding : 2 rpx 10 rpx ;
margin-left : 10 rpx ;
margin-right : 10 rpx ;
border-bottom : 2 rpx solid aqua;
}
