快捷導(dǎo)航

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

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

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

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

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

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

yPicker

筆者仔細(xì)翻閱了官方文檔和許多博主文章發(fā)現(xiàn)提出了各種各樣的解決方案（但很遺憾沒發(fā)現(xiàn)有博主詳細(xì)公開代碼），但是對于這樣一個其實(shí)并不需要“聯(lián)動”、列數(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í)軟鍵盤不彈出”（兩個屬性作用一樣，都寫是因?yàn)锳ndroid和iOS的兼容性問題）。

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

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

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

change中很簡單：只需要把選中的數(shù)據(jù)暴露給頁面中（或者通過 triggerEvent 返回給調(diào)用頁面）即可；
columnchange中要做的就是當(dāng)前選中的每一列的值填充到data中對應(yīng)數(shù)組的某一項(xiàng)。比如：e.detail.column==1 時(shí)表示當(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)聽兩個參數(shù)：multiArray和multiIndex，他們都是數(shù)組！
multiArray主要用來表示監(jiān)聽幾列，其元素都是一個個數(shù)組，如：[years, months, days, hours, minutes]
multiIndex是當(dāng)前每一列（點(diǎn)開時(shí)的）初始值！如：[10, meng_date.getMonth(), meng_date.getDate()-1, meng_date.getHours(), meng_date.getMinutes()]
一般來說，multiIndex中的值也被用來當(dāng)做取multiArray中元素時(shí)的第二個索引！

說說省市區(qū)三級聯(lián)動實(shí)現(xiàn)

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

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

提取碼: wc3g

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

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

citys

正式開始

不知大家有沒有使用過，或聽過小程序的 picker-view 組件，其定位就是：嵌入頁面的滾動選擇器。
它有三個參數(shù)：

參數(shù)	類型	說明
value	Number Array	數(shù)組中的數(shù)字依次表示 picker-view 內(nèi)的 picker-view-colume 選擇的第幾項(xiàng)（下標(biāo)從 0 開始），數(shù)字大于 picker-view-column 可選項(xiàng)長度時(shí)，選擇最后一項(xiàng)。
indicator-style	String	設(shè)置選擇器中間選中框的樣式
bindchange	EventHandle	當(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 開始）

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

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

value中也可以只放一個number（通?？梢苑艛?shù)組元素下標(biāo)），picker-view會自動將其轉(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>

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

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）都綁定了一個change函數(shù)——滑動時(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視野中的元素）暴露到頁面上，并將下標(biāo)定位到這里 —— 以便在頁面無刷新下的下一次點(diǎn)開時(shí)從這里開始找！
然后最重要的一點(diǎn)就是：在滑動停止時(shí)，將另外兩列的數(shù)據(jù)重新定位到第一個！
——當(dāng)然，你也可以選擇在一個picker-view中放置多個picker-view-column組件，這樣的話就和上面多列picker一樣，需要多個數(shù)組聯(lián)動來傳遞數(shù)據(jù)了！

總結(jié)

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

您可能感興趣的文章: