快捷導(dǎo)航

微信小程序自定義yPicker組件實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)功能

更新時(shí)間：2020年10月29日 10:06:00 作者：行舟客

這篇文章主要介紹了微信小程序自定義yPicker組件分析及省市區(qū)三級(jí)聯(lián)動(dòng)實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

自從上一篇文章：微信小程序自定義日歷組件及flex布局最后一行對(duì)齊問(wèn)題分析出來(lái)以后，有人私聊我說(shuō)能不能從頭分析一下我開(kāi)源的自定義組件？一直沒(méi)時(shí)間。這不，最近項(xiàng)目中有個(gè)需求是 省市區(qū)三級(jí)聯(lián)動(dòng) ，我就順便從組件庫(kù)中的第一個(gè) 「擴(kuò)展日期-時(shí)間picker（點(diǎn)此直接至GitHub，歡迎star）」組件開(kāi)始說(shuō)一下這兩個(gè)功能的實(shí)現(xiàn)。

簡(jiǎn)單說(shuō)一下“自定義日期-時(shí)間組件”

它的背景是項(xiàng)目的第一版當(dāng)時(shí)發(fā)現(xiàn)微信小程序內(nèi)置的日期組件：picker只能精確到某一天（年月日），但是我們很多時(shí)候需要年月日時(shí)分甚至是年月日時(shí)分秒（如結(jié)束時(shí)間/發(fā)布時(shí)間）。

yPicker

筆者仔細(xì)翻閱了官方文檔和許多博主文章發(fā)現(xiàn)提出了各種各樣的解決方案（但很遺憾沒(méi)發(fā)現(xiàn)有博主詳細(xì)公開(kāi)代碼），但是對(duì)于這樣一個(gè)其實(shí)并不需要“聯(lián)動(dòng)”、列數(shù)也不固定的功能，用多列picker模擬多列選擇器 即可。

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
	<input value='{{time}}' readonly="" disabled="true" placeholder='{{defaulttext}}' />
</picker>

其中 readonly="" disabled="true" 的作用是使“input聚焦時(shí)軟鍵盤不彈出”（兩個(gè)屬性作用一樣，都寫是因?yàn)锳ndroid和iOS的兼容性問(wèn)題）。

用input代替view是因?yàn)閕nput的placeholder方便實(shí)現(xiàn)“無(wú)選中時(shí)默認(rèn)提示”的效果。

主要實(shí)現(xiàn)策略

如上所示，監(jiān)聽(tīng)了兩個(gè)事件，分別是：日期選擇窗口彈出時(shí)以及點(diǎn)擊“確定”按鈕時(shí)觸發(fā)函數(shù)change、多列選擇器中每一列滑動(dòng)時(shí)觸發(fā)事件columnchange。

change中很簡(jiǎn)單：只需要把選中的數(shù)據(jù)暴露給頁(yè)面中（或者通過(guò) triggerEvent 返回給調(diào)用頁(yè)面）即可；
columnchange中要做的就是當(dāng)前選中的每一列的值填充到data中對(duì)應(yīng)數(shù)組的某一項(xiàng)。比如：e.detail.column==1 時(shí)表示當(dāng)前滑動(dòng)的是第二列（月份），此時(shí)需要判斷的是每一月有幾天：

if (e.detail.column == 1) {
 let num = parseInt(this.data.multiArray[e.detail.column][e.detail.value]);
 let temp = [];
 if (num == 1 || num == 3 || num == 5 || num == 7 || num == 8 || num == 10 || num == 12) { //判斷31天的月份
 for (let i = 1; i <= 31; i++) {
  if (i < 10) {
  i = "0" + i;
  }
  temp.push("" + i);
 }
 this.setData({
  ['multiArray[2]']: temp //第三列天數(shù)更新（根據(jù)月份）
 });
 }
}

注意： 多列picker組件監(jiān)聽(tīng)兩個(gè)參數(shù)：multiArray和multiIndex，他們都是數(shù)組！
multiArray主要用來(lái)表示監(jiān)聽(tīng)?zhēng)琢?，其元素都是一個(gè)個(gè)數(shù)組，如：[years, months, days, hours, minutes]
multiIndex是當(dāng)前每一列（點(diǎn)開(kāi)時(shí)的）初始值！如：[10, meng_date.getMonth(), meng_date.getDate()-1, meng_date.getHours(), meng_date.getMinutes()]
一般來(lái)說(shuō)，multiIndex中的值也被用來(lái)當(dāng)做取multiArray中元素時(shí)的第二個(gè)索引！

說(shuō)說(shuō)省市區(qū)三級(jí)聯(lián)動(dòng)實(shí)現(xiàn)

先將城市列表文件發(fā)出來(lái)：（永久免費(fèi)下載）

鏈接: https://pan.baidu.com/s/1tPabuqSY6SfBNfOEMkjPVA

提取碼: wc3g

使用時(shí)按如下引入即可：（是一個(gè)citysearch.js文件）

import placeArrays from 'citysearch文件路徑';
const placeArray=placeArrays.placeArray

citys

正式開(kāi)始

不知大家有沒(méi)有使用過(guò)，或聽(tīng)過(guò)小程序的 picker-view 組件，其定位就是：嵌入頁(yè)面的滾動(dòng)選擇器。
它有三個(gè)參數(shù)：

參數(shù)	類型	說(shuō)明
value	Number Array	數(shù)組中的數(shù)字依次表示 picker-view 內(nèi)的 picker-view-colume 選擇的第幾項(xiàng)（下標(biāo)從 0 開(kāi)始），數(shù)字大于 picker-view-column 可選項(xiàng)長(zhǎng)度時(shí)，選擇最后一項(xiàng)。
indicator-style	String	設(shè)置選擇器中間選中框的樣式
bindchange	EventHandle	當(dāng)滾動(dòng)選擇，value 改變時(shí)觸發(fā) change 事件，event.detail = {value: value} value為數(shù)組，表示 picker-view 內(nèi)的 picker-view-column 當(dāng)前選擇的是第幾項(xiàng)（下標(biāo)從 0 開(kāi)始）

需要注意的是：其中只可放置<picker-view-column/>組件，其他節(jié)點(diǎn)不會(huì)顯示，其孩子節(jié)點(diǎn)的高度會(huì)自動(dòng)設(shè)置成與picker-view的選中框的高度一致。

有了這個(gè)組件，我們是不是能想到：在一個(gè)彈出view中設(shè)置三個(gè)picker-view組件，每個(gè)組件中放一個(gè)picker-view-column組件用于展示當(dāng)前列？

value中也可以只放一個(gè)number（通常可以放數(shù)組元素下標(biāo)），picker-view會(huì)自動(dòng)將其轉(zhuǎn)為 [下標(biāo)值]

就像這樣：

<view style="width:100%;position:fixed;bottom:0;left:0;z-index:10000;height:500rpx;background-color:white">
 <!-- 仿原生picker的“確定”和“取消”按鈕 -->
 <view style="display:flex;width:100%;height:100%">
 <view
 style="position: absolute;top:0;width:100%;height:100rpx;z-index:1000000;display:flex;justify-content:space-between;align-items:center;">
 <view style="width:calc(100% / 3);text-align:center;color:rgba(0,0,0,.6);font-size:39rpx" bindtap="displayer">取消
 </view>
 <view style="width:calc(100% / 3);text-align:center;color:rgb(63,142,255);font-size:39rpx" bindtap="confirm">確定
 </view>
 </view>
 
 <picker-view indicator-style="height: 200rpx;"
 style="width: 100%;height: 300rpx;text-align: center;margin-top:150rpx" value="{{pIndex}}"
 bindchange="changeProvince">
 <picker-view-column>
 <view wx:for="{{placeArray}}" wx:key="name" style="line-height: 77rpx">{{item.name}}</view>
 </picker-view-column>
 </picker-view>
 <picker-view indicator-style="height: 200rpx;"
 style="width: 100%;height: 300rpx;text-align: center;margin-top:150rpx" value="{{cIndex}}"
 bindchange="changeCity">
 <picker-view-column>
 <view wx:for="{{placeArray[pIndex].city}}" wx:key="name" style="line-height: 77rpx">{{item.name}}</view>
 </picker-view-column>
 </picker-view>
 <picker-view indicator-style="height: 200rpx;"
 style="width: 100%;height: 300rpx;text-align: center;margin-top:150rpx" value="{{aIndex}}"
 bindchange="changeArea">
 <picker-view-column>
 <view wx:for="{{placeArray[pIndex].city[cIndex].area}}" wx:key="*this" style="line-height: 77rpx">{{item}}
 </view>
 </picker-view-column>
 </picker-view>
 
 </view>
</view>

可以看到，每一個(gè)picker-view-column中做的唯一一件事就是：遍歷固定的某一列（某一個(gè)數(shù)組）并渲染出來(lái)。

city_picker

然后如

// js-data
data:{
	placeArray: placeArray,
 province: "",//placeArray[0].name - 省
 pIndex: 0,
 city: "",//placeArray[0].city[0].name - 市
 cIndex: 0,
 area: "",//placeArray[0].city[0].area[0] - 區(qū)
 aIndex: 0,
}

上wxml中為每一列（picker-view）都綁定了一個(gè)change函數(shù)——滑動(dòng)時(shí)觸發(fā)：

changeProvince: function(e){
 const val = e.detail.value
 this.setData({
 pIndex: val,
 cIndex: 0,
 aIndex: 0,
 province: placeArray[val].name,
 city: placeArray[val].city[0].name,
 area: placeArray[val].city[0].area[0]
 })
},
changeCity: function(e){
 const val = e.detail.value
 this.setData({
 cIndex: val,
 aIndex: 0,
 city: placeArray[this.data.pIndex].city[val].name,
 area: placeArray[this.data.pIndex].city[val].area[0]
 })
},
changeArea: function(e){
 const val = e.detail.value
 this.setData({
 aIndex: val,
 area: placeArray[this.data.pIndex].city[this.data.cIndex].area[val]
 })
},

他們的作用就是把當(dāng)前選擇列的選中元素（出現(xiàn)在indicator-style視野中的元素）暴露到頁(yè)面上，并將下標(biāo)定位到這里 —— 以便在頁(yè)面無(wú)刷新下的下一次點(diǎn)開(kāi)時(shí)從這里開(kāi)始找！
然后最重要的一點(diǎn)就是：在滑動(dòng)停止時(shí)，將另外兩列的數(shù)據(jù)重新定位到第一個(gè)！
——當(dāng)然，你也可以選擇在一個(gè)picker-view中放置多個(gè)picker-view-column組件，這樣的話就和上面多列picker一樣，需要多個(gè)數(shù)組聯(lián)動(dòng)來(lái)傳遞數(shù)據(jù)了！

總結(jié)

到此這篇關(guān)于微信小程序自定義yPicker組件實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)功能的文章就介紹到這了,更多相關(guān)微信小程序自定義yPicker組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: