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

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

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

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

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

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

yPicker

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

用input代替view是因為input的placeholder方便實現(xiàn)“無選中時默認提示”的效果。

主要實現(xiàn)策略

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

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

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是當前每一列（點開時的）初始值！如：[10, meng_date.getMonth(), meng_date.getDate()-1, meng_date.getHours(), meng_date.getMinutes()]
一般來說，multiIndex中的值也被用來當做取multiArray中元素時的第二個索引！

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

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

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

提取碼: wc3g

使用時按如下引入即可：（是一個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 選擇的第幾項（下標從 0 開始），數(shù)字大于 picker-view-column 可選項長度時，選擇最后一項。
indicator-style	String	設置選擇器中間選中框的樣式
bindchange	EventHandle	當滾動選擇，value 改變時觸發(fā) change 事件，event.detail = {value: value} value為數(shù)組，表示 picker-view 內(nèi)的 picker-view-column 當前選擇的是第幾項（下標從 0 開始）

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

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

value中也可以只放一個number（通?？梢苑艛?shù)組元素下標），picker-view會自動將其轉(zhuǎn)為 [下標值]

就像這樣：

<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ù)——滑動時觸發(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]
 })
},

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

總結(jié)

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

您可能感興趣的文章:

JS 邏輯判斷不要只知道用 if-else 和 switch條件判斷(小技巧)
這篇文章主要介紹了JS 邏輯判斷不要只知道用 if-else 和 switch,在一些邏輯復雜度的增加，代碼中的 if/else 和 switch 會越來越臃腫。本文將帶你嘗試寫出更優(yōu)雅的判斷邏輯，需要的朋友可以參考下
2020-05-05
微信小程序?qū)崿F(xiàn)tabbar凹凸圓選中動畫效果實例
小程序日益增多的情況下,UI風格顯得越來越重要,下面這篇文章主要給大家介紹了關于微信小程序?qū)崿F(xiàn)tabbar凹凸圓選中動畫效果的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-09-09
JavaScript定時器實現(xiàn)無縫滾動圖片
這篇文章主要為大家詳細介紹了JavaScript定時器實現(xiàn)無縫滾動圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-05-05
小程序開發(fā)之uniapp引入iconfont圖標以及使用方式
uniapp本身是有icon組件的,但由于icon組件各端表現(xiàn)存在差異,所以我們可以通過使用iconfont的字體圖標來彌補這些差異,下面這篇文章主要給大家介紹了關于小程序開發(fā)之uniapp引入iconfont圖標以及使用方式的相關資料,需要的朋友可以參考下
2022-11-11
JS限制Textarea文本域字符個數(shù)的具體實現(xiàn)
這篇文章介紹了JS限制Textarea文本域字符個數(shù)的具體實現(xiàn)，有需要的朋友可以參考一下
2013-08-08
基于JavaScript實現(xiàn)HarmonyOS備忘錄服務卡片
這篇文章主要介紹了基于JavaScript實現(xiàn)HarmonyOS備忘錄服務卡片，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-05-05
這篇文章主要介紹了javascript數(shù)組隨機排序的方法,實例分析了javascript數(shù)組排序的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-07-07