小程序miniprogram-picker組件,自動(dòng)處理多級(jí)聯(lián)動(dòng)诡曙,支持npm

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)更改rangevalue的值,從而完成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安裝第三方包。

效果

WX20181217-105545@2x.png
WX20181217-105613@2x.png
WX20181217-105849@2x.png

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吁峻,bindcancelbindcolumnchange在张,disabled用含。具體可以查看源碼。

使用方法

  1. 安裝miniprogram-picker包帮匾。

    npm install miniprogram-picker --production
    
  2. 點(diǎn)擊微信開發(fā)者工具中的菜單欄:工具 --> 構(gòu)建 npm啄骇。此時(shí)你會(huì)發(fā)現(xiàn)項(xiàng)目中多出一個(gè)miniprogram_npm目錄,里面有編譯過的miniprogram-picker瘟斜。

  3. .json中引入miniprogram-picker第三方組件缸夹。使用方法與使用自己封裝的組件相同,只不過不需要寫具體路徑了螺句,很方便虽惭。

    {
        "usingComponents": {
         "miniprogram-picker": "miniprogram-picker"
        }
    }
    
  4. .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>
    
  5. .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提出意見或者交流哈窜醉。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市艺谆,隨后出現(xiàn)的幾起案子榨惰,更是在濱河造成了極大的恐慌,老刑警劉巖静汤,帶你破解...
    沈念sama閱讀 222,946評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件琅催,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡虫给,警方通過查閱死者的電腦和手機(jī)藤抡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來狰右,“玉大人杰捂,你說我怎么就攤上這事∑灏觯” “怎么了嫁佳?”我有些...
    開封第一講書人閱讀 169,716評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)谷暮。 經(jīng)常有香客問我蒿往,道長(zhǎng),這世上最難降的妖魔是什么湿弦? 我笑而不...
    開封第一講書人閱讀 60,222評(píng)論 1 300
  • 正文 為了忘掉前任瓤漏,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蔬充。我一直安慰自己蝶俱,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,223評(píng)論 6 398
  • 文/花漫 我一把揭開白布饥漫。 她就那樣靜靜地躺著榨呆,像睡著了一般。 火紅的嫁衣襯著肌膚如雪庸队。 梳的紋絲不亂的頭發(fā)上积蜻,一...
    開封第一講書人閱讀 52,807評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音彻消,去河邊找鬼竿拆。 笑死,一個(gè)胖子當(dāng)著我的面吹牛宾尚,可吹牛的內(nèi)容都是我干的丙笋。 我是一名探鬼主播,決...
    沈念sama閱讀 41,235評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼煌贴,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼不见!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起崔步,我...
    開封第一講書人閱讀 40,189評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎缎谷,沒想到半個(gè)月后井濒,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,712評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡列林,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,775評(píng)論 3 343
  • 正文 我和宋清朗相戀三年瑞你,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片希痴。...
    茶點(diǎn)故事閱讀 40,926評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡者甲,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出砌创,到底是詐尸還是另有隱情虏缸,我是刑警寧澤,帶...
    沈念sama閱讀 36,580評(píng)論 5 351
  • 正文 年R本政府宣布嫩实,位于F島的核電站刽辙,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏甲献。R本人自食惡果不足惜宰缤,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,259評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧慨灭,春花似錦朦乏、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,750評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至语淘,卻和暖如春诲宇,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背惶翻。 一陣腳步聲響...
    開封第一講書人閱讀 33,867評(píng)論 1 274
  • 我被黑心中介騙來泰國打工姑蓝, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人吕粗。 一個(gè)月前我還...
    沈念sama閱讀 49,368評(píng)論 3 379
  • 正文 我出身青樓纺荧,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國和親颅筋。 傳聞我的和親對(duì)象是個(gè)殘疾皇子宙暇,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,930評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容