range 小程序picker_微信小程序-官方组件picker云开发省市区三级联动选择器
早在一年多以前，我寫過一篇微信小程序-省市區縣三級聯動選擇器的文章，那時候小程序剛起步，網上找了很久沒有相關的文獻，官方也沒有相關的組件，我就自己動手寫了一個，也因為剛開始接觸寫的不是很好。
當時省市區的數據我是在網上找的一個json文檔，然后把里面的json數據復制出來，在js文件里寫了一個方法用數組接收復制出來的json數據，外部調用這個方法就直接返回這個數組，因為json數據有幾百k的占用，顯然不是很符合小程序的“小”的初衷。
最近無事，研究了下云開發，我就想把數據放在云端數據庫，重寫一下省市區三級聯動選擇器。后來在查看小程序組件的時候發現，現在官方組件picker專門為我們提供了"省市區選擇器"這個控件，假如單單只是需要文字形式的"省市區選擇器"，大家可以選用官方的，性能方面以及簡易方面應該更適合普通開發者，因為直接接入就行了，不用寫內部復雜的邏輯。
圖1-官方省市區選擇器文檔說明
省市區選擇器
當前選擇：{{region[0]}}，{{region[1]}}，{{region[2]}}
//.js
//點擊確定按鈕
bindRegionChange: function (e) {
console.log(e)
console.log('picker發送選擇改變，攜帶值為', e.detail.value)
this.setData({
region: e.detail.value
})
}
但是我們往往不只是需要e.detail.value里面的省市區名字，可能后臺只需要傳code就行了。按圖1bingchange的屬性是有code的但是我打印e.detail.code發現是沒有code的。不知道是不是我版本的問題，反正打印除了e.detail.value有值postcode和code都是沒值的，那怎么辦呢？沒值我就自己造值，從某接口獲取了一份數據，已經按省市區三維數組處理好了，我存在了云數據庫里。
因為官方的"省市區選擇器"mode="region"里的數組是定死的由微信提供，不能做更改，好在同是piker組件mode="multiSelector"時提供了自定義的"多列選擇器"：
圖2-多列選擇器
本文使用的數據結構大致如下：
[
{
"citys":[
{
"areas":[
{
"code":"440303",
"name":"羅湖區"
},
{
"code":"440304",
"name":"福田區"
},
...
],
"code":"440300",
"name":"深圳市"
},
...
],
"code":"440000",
"name":"廣東省"
},
...
]
屬性rang對應是最外層的整個數組，range-key指定選擇器上要顯示的內容，這里range-key="name"就會顯示中文內容，假若range-key="code"顯示的就是code字段內容了就是一串數字，眼尖的朋友應該知道其實這串數字就是身份證前六位，通過它們的組合傳給后臺就可以定位省市區了。
言歸正傳動手寫代碼：
多列選擇器
當前選擇：{{multiArray[0][multiIndex[0]].name}}({{multiArray[0][multiIndex[0]].code}}){{multiArray[1].length > 0 ?("，" + multiArray[1][multiIndex[1]].name + "(" + multiArray[1][multiIndex[1]].code + ")"):""}}{{multiArray[2].length > 0 ?("，" + multiArray[2][multiIndex[2]].name + "(" + multiArray[2][multiIndex[2]].code + ")"):""}}
/* pages/getCityData/getCityData.wxss */
.picker{
padding: 13px;
background-color: #FFFFFF;
}
//pages/getCityData/getCityData.json
{
"component": true,
"usingComponents": {}
}
js文件中multiArray代表顯示的[省,市,區]數組，multiIndex代表滑動后定位的下標數組。從數據庫獲取數據后通過[0,0,0]得到初始化的multiArray，通過滑動調用bindMultiPickerColumnChange方法得到新的數組下標數組，進而得到新的數據數組。
// pages/getCityData/getCityData.js
Component({
/**
* 組件的屬性列表
*/
properties: {
},
/**
* 組件的初始數據
*/
data: {
multiArray: [],
multiIndex: [0,0,0]
},
lifetimes: {
// 生命周期函數，可以為函數，或一個在methods段中定義的方法名
attached: function () {
this.getCityInfo()
}
},
/**
* 組件的方法列表
*/
methods: {
//獲取數據庫數據
getCityInfo: function(){
wx.showLoading({
title: 'Loading...',
})
const db = wx.cloud.database()
//因為數據庫只存有一個總的數據字典，所以指定它的ID直接獲取數據
var that = this
db.collection('cityDataArr').doc('5bdad6225f23a246bb2a97e1').get({
success: res => {
wx.hideLoading();
if (res.data){
//獲取云數據庫數據
var temp = res.data.data;
//初始化更新數據
that.setData({
provinces: temp,
multiArray: [temp, temp[0].citys, temp[0].citys[0].areas],
multiIndex: [0, 0, 0]
})
console.log(that.data.provinces)
}
},
fail: err => {
wx.hideLoading();
console.error(err)
}
})
},
//點擊確定
bindMultiPickerChange: function (e) {
console.log('picker發送選擇改變，攜帶值為', e.detail.value)
this.setData({
multiIndex: e.detail.value
})
},
//滑動
bindMultiPickerColumnChange: function(e){
console.log('修改的列為', e.detail.column, '，值為', e.detail.value);
var data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
//更新滑動的第幾列e.detail.column的數組下標值e.detail.value
data.multiIndex[e.detail.column] = e.detail.value;
//如果更新的是第一列“省”，第二列“市”和第三列“區”的數組下標置為0
if (e.detail.column == 0){
data.multiIndex = [e.detail.value,0,0];
} else if (e.detail.column == 1){
//如果更新的是第二列“市”，第一列“省”的下標不變，第三列“區”的數組下標置為0
data.multiIndex = [data.multiIndex[0], e.detail.value, 0];
} else if (e.detail.column == 2) {
//如果更新的是第三列“區”，第一列“省”和第二列“市”的值均不變。
data.multiIndex = [data.multiIndex[0], data.multiIndex[1], e.detail.value];
}
var temp = this.data.provinces;
data.multiArray[0] = temp;
if ((temp[data.multiIndex[0]].citys).length > 0){
//如果第二列“市”的個數大于0,通過multiIndex變更multiArray[1]的值
data.multiArray[1] = temp[data.multiIndex[0]].citys;
var areaArr = (temp[data.multiIndex[0]].citys[data.multiIndex[1]]).areas;
//如果第三列“區”的個數大于0,通過multiIndex變更multiArray[2]的值；否則賦值為空數組
data.multiArray[2] = areaArr.length > 0 ? areaArr : [];
}else{
//如果第二列“市”的個數不大于0，那么第二列“市”和第三列“區”都賦值為空數組
data.multiArray[1] = [];
data.multiArray[2] = [];
}
//data.multiArray = [temp, temp[data.multiIndex[0]].citys, temp[data.multiIndex[0]].citys[data.multiIndex[1]].areas];
//setData更新數據
this.setData(data);
}
}
})
注釋說明都在以上代碼中，至于最后怎么顯示?省：multiArray[0][multiIndex[0]]，市：multiArray[1][multiIndex[1]]，區：multiArray[2][multiIndex[2]]。得到的是object的字典鍵值對，需要顯示中文取.name，需要獲取編碼取.code。
當前選擇：{{multiArray[0][multiIndex[0]].name}}({{multiArray[0][multiIndex[0]].code}}){{multiArray[1].length > 0 ?("，" + multiArray[1][multiIndex[1]].name + "(" + multiArray[1][multiIndex[1]].code + ")"):""}}{{multiArray[2].length > 0 ?("，" + multiArray[2][multiIndex[2]].name + "(" + multiArray[2][multiIndex[2]].code + ")"):""}}
圖3-最終效果
下面附上處理后的json數據cityDataArr.json，直接上傳到云數據庫即可。
未處理的plist文件cityDataArr.plist也一并附上 。
總結
以上是生活随笔為你收集整理的range 小程序picker_微信小程序-官方组件picker云开发省市区三级联动选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python下载网络错误_下载失败，出现
- 下一篇： jmeter 最大时间长_长连接和短连接