miniprogram-picker已經(jīng)在Github開源臀叙，并發(fā)布了npm包。并寫了詳細(xì)的說明文檔和示例价卤，歡迎各位大佬前往拍磚劝萤、star。如果能給你提升一點(diǎn)效率慎璧，那再好不過了床嫌，先謝謝各位了。
IceApriler/miniprogram-picker?
簡(jiǎn)介
微信小程序的Picker組件只是半成品組件胸私，在啟用多級(jí)聯(lián)動(dòng)時(shí)需要監(jiān)聽bindcolumnchange事件厌处，來手動(dòng)更改range和value的值，從而完成Picker的聯(lián)動(dòng)變化盖文，比較麻煩嘱蛋，不利于在不同的業(yè)務(wù)邏輯中的復(fù)用。
本組件為了解決以上痛點(diǎn)五续，對(duì)微信小程序原生Picker組件進(jìn)行了二次封裝洒敏。開發(fā)者只需要提供固定數(shù)據(jù)結(jié)構(gòu)的sourceData，再進(jìn)行一些必要配置疙驾，本組件就可以自動(dòng)幫助開發(fā)者處理聯(lián)動(dòng)邏輯凶伙。
本組件支持npm構(gòu)建，從小程序基礎(chǔ)庫版本2.2.1或以上它碎、及開發(fā)者工具1.02.1808300或以上開始函荣，小程序支持使用npm安裝第三方包。
效果
API
屬性
| 屬性 | 說明 | 類型 | 默認(rèn)值 | 是否必填 |
|---|---|---|---|---|
| sourceData | 源數(shù)組扳肛，sourceData有幾維傻挂，Picker就可以有幾階。格式必須為數(shù)組和對(duì)象的集合挖息，參考示例 | Array | [] | true |
| steps | Picker的階數(shù) | Number | 1 | false |
| shownFieldName | 展示數(shù)據(jù)的字段名稱 | String | 'name' | false |
| subsetFieldName | 子節(jié)點(diǎn)的字段名稱金拒，該字段的值為Picker下一階的數(shù)組 | String | 'subset' | false |
| otherNeedFieldsName | 其他需要返回的字段，開發(fā)者可以根據(jù)需求自定義 | Array | [] | false |
| defaultIndex | 默認(rèn)選中項(xiàng)的下標(biāo)數(shù)組套腹，優(yōu)先于defaultValue | Array | [] | false |
| defaultValue | 默認(rèn)選中項(xiàng)的值數(shù)組绪抛，此屬性啟用時(shí)defaultValueUniqueField為必填項(xiàng) | Array | [] | false |
| defaultValueUniqueField | 默認(rèn)選中項(xiàng)的值數(shù)組的唯一字段资铡，用來和源數(shù)組進(jìn)行比對(duì) | String | '' | - |
| autoSelect | 初始化時(shí)，是否需要自動(dòng)調(diào)用bindchange事件返回結(jié)果給開發(fā)者 | Boolean | false | false |
| initColumnSelectedIndex | 選擇了第n列后幢码，是否將大于n的列的選擇值自動(dòng)初始化為0 | Boolean | false | false |
| disabled | 是否禁用 | Boolean | false | false |
方法
| 方法 | 說明 | 類型 | 事件對(duì)象 |
|---|---|---|---|
| bindchange | 用戶點(diǎn)擊確認(rèn)時(shí)觸發(fā) | EventHandle | event.detail = {selectedIndex, selectedArray} |
| bindcancel | 用戶點(diǎn)擊取消時(shí)觸發(fā) | EventHandle | event.detail為原生組件的bindcancel觸發(fā)時(shí)的event對(duì)象 |
| bindcolumnchange | 用戶滑動(dòng)某一列的值改變時(shí)觸發(fā) | EventHandle | event.detail為原生組件的bindcolumnchange觸發(fā)時(shí)的event對(duì)象 |
規(guī)則
-
sourceData為源數(shù)組笤休，是一個(gè)數(shù)組對(duì)象結(jié)構(gòu)的集合，sourceData有幾維症副，Picker就可以有幾階店雅。 -
steps，你需要明確指定Picker的階數(shù)贞铣，比如三級(jí)聯(lián)動(dòng)則設(shè)置steps: 3底洗。 - 需要注意的是，比如
steps設(shè)置了3咕娄，那么sourceData務(wù)必要滿足這個(gè)階數(shù)。 -
initColumnSelectedIndex屬性啟用后珊擂，開發(fā)者調(diào)試工具上會(huì)有失效情況圣勒，但是真機(jī)目前沒有發(fā)現(xiàn)問題，所以是否開啟請(qǐng)開發(fā)者自行決定摧扇。 -
bindchange觸發(fā)的事件對(duì)象：-
selectedIndex：Picker選擇項(xiàng)的索引數(shù)組圣贸； -
selectedArray：Picker選擇項(xiàng)的值數(shù)組；
-
- 本組件的有些方法和屬性與微信原生API的行為一致扛稽，比如：
bindchange吁峻，bindcancel，bindcolumnchange在张，disabled用含。具體可以查看源碼。
使用方法
-
安裝
miniprogram-picker包帮匾。npm install miniprogram-picker --production 點(diǎn)擊微信開發(fā)者工具中的菜單欄：工具 --> 構(gòu)建 npm啄骇。此時(shí)你會(huì)發(fā)現(xiàn)項(xiàng)目中多出一個(gè)
miniprogram_npm目錄，里面有編譯過的miniprogram-picker瘟斜。-
.json中引入miniprogram-picker第三方組件缸夹。使用方法與使用自己封裝的組件相同，只不過不需要寫具體路徑了螺句，很方便虽惭。{ "usingComponents": { "miniprogram-picker": "miniprogram-picker" } } -
.wxml中使用miniprogram-picker。我這里給出了兩個(gè)小例子蛇尚，第一個(gè)是三級(jí)聯(lián)動(dòng)芽唇，第二個(gè)是兩級(jí)聯(lián)動(dòng)。具體屬性和事件方法可以參考API佣蓉。miniprogram-picker是沒有任何樣式的披摄，具體樣式開發(fā)者可以自定義亲雪，如果你熟悉slot的用法那就更好了，具體參考小程序組件wxml的slot疚膊。
css就略過了哈义辕，各位可以去項(xiàng)目地址看。<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"> 當(dāng)前選擇：<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"> 當(dāng)前選擇：<view wx:for="{{result_2}}" wx:key="index">{{item['name']}}</view> </view> </miniprogram-picker> -
.js中設(shè)置sourceData和監(jiān)聽pickerChange事件等寓盗。Page({ /** * 頁面的初始數(shù)據(jù) */ 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用戶點(diǎn)擊確認(rèn)時(shí)觸發(fā) * * @param {Object} e pickerChange的事件對(duì)象 * @param {Object} e.detail.selectedIndex 用戶選擇的數(shù)據(jù)在數(shù)組中所在的下標(biāo) * @param {Object} e.detail.selectedArray 用戶選擇的數(shù)據(jù) */ pickerChange(e) { const { picker } = e.currentTarget.dataset const { selectedIndex, selectedArray } = e.detail const list = { picker_1: 'result_1', picker_2: 'result_2', } console.log('多級(jí)聯(lián)動(dòng)結(jié)果:', selectedIndex, selectedArray) const change = {} change[list[picker]] = selectedArray this.setData(change) }, /** * Picker用戶點(diǎn)擊取消時(shí)觸發(fā) * * @param {Object} e pickerCancel的事件對(duì)象 * @param {Object} e.detail 是原生Picker組件的bindcancel觸發(fā)時(shí)的事件對(duì)象e */ pickerCancel(e) { console.log(e) }, /** * Picker用戶滑動(dòng)某一列的值改變時(shí)觸發(fā) * * @param {Object} e pickerColumnchange的事件對(duì)象 * @param {Object} e.detail 是原生Picker組件的bindcolumnchange觸發(fā)時(shí)的事件對(duì)象e */ pickerColumnchange(e) { console.log(e) }, })
總結(jié)
這個(gè)組件其實(shí)在兩三個(gè)月前就寫好了灌砖，只不過當(dāng)時(shí)正處于離職期間，一直沒有時(shí)間精力去整理出來傀蚌，然后在新公司寫react-native也用了這個(gè)組件的邏輯基显，感覺確實(shí)比較方便吧，所以就在github開源了善炫，并學(xué)習(xí)發(fā)布了npm包撩幽。
今天就寫到這里啦，謝謝各位咯箩艺，歡迎眾大佬到對(duì)miniprogram-picker提出意見或者交流哈窜醉。
