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提出意見或者交流哈窜醉。