微信轻应用：便捷生活新选择

时间：11-09 现代故事提交错误

大家好，关于微信轻应用：便捷生活新选择很多朋友都还不太明白，不过没关系，因为今天小编就来为大家分享关于的知识点，相信应该可以解决大家的一些困惑和问题，如果碰巧可以解决您的问题，还望关注下本站哦，希望对各位有所帮助！

//点击确定按钮

bindRegionChange: 函数(e) {

控制台.log(e)

console.log("picker发送选择变化，携带值", e.detail.value)

this.setData({

Region: e.detail.value

})

}但我们通常不仅仅需要e.detail.value 中的省份和城市名称。也许后台只需要传代码就可以了。根据图1，bingchange的属性有code，但是当我打印e.detail.code时，发现没有code。不知道是不是我版本的问题。反正除了e.detail.value之外，postcode和code都是没有价值的，那我该怎么办呢？如果没有价值，我就创造自己的价值，从某个接口获取一条数据。它已经被处理为省市的三维数组，我将其存储在云数据库中。

因为官方的‘省市选择器’mode=‘region’中的数组是微信提供的，无法更改。幸运的是，当mode="multiSelector" 选择器时，相同的Piker 组件提供了自定义的“多列”：

图2 - 多列选择器

本文使用的数据结构大致如下：

[

{

"城市":[

{

"地区":[

{

"代码":"440303",

"name":"罗湖区"

{

"代码":"440304",

"name":"福田区"

"代码":"440300",

"名称":"深圳市"

"代码":"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 + ")"):""}}/* 页面/getCityData/getCityData.wxss */

.picker{

内边距： 13px；

背景颜色： #FFFFFF;

}//pages/getCityData/getCityData.json

{

"组件": 真实，

"usingComponents": {}

js文件中，multiArray表示显示的[省市区]数组，multiIndex表示滑动后定位的下标数组。从数据库获取数据后，通过[0,0,0]获取初始化的multiArray，通过滑动bindMultiPickerColumnChange方法获取新的数组下标数组，然后获取新的数据数组。

//页面/getCityData/getCityData.js

成分（{

/**

* 组件属性列表

属性： {

/**

* 组件的初始数据

数据： {

multiArray:[],

multiIndex: [0,0,0]

生命周期： {

//生命周期函数，可以是methods部分定义的函数或方法名

附加：函数（）{

this.getCityInfo()

}

/**

* 组件方法列表

方法： {

//获取数据库数据

获取城市信息：函数（）{

wx.showLoading({

title: "正在加载.",

})

const db=wx.cloud.database()

//由于数据库只存储一份总数据字典，因此指定其ID即可直接获取数据。

var that=this

db.collection("cityDataArr").doc("5bdad6225f23a246bb2a97e1").get({

成功：资源={

wx.hideLoading();

if (res.data){

//获取云数据库数据

var temp=res.data.data;

//初始化更新数据

that.setData({

省份：温度，

multiArray: [临时，临时[0].城市，临时[0].城市[0].地区]，

多索引： [0, 0, 0]

})

console.log(that.data.provinces)

}

失败：错误={

wx.hideLoading();

控制台.错误（错误）

}

})

//点击确定

bindMultiPickerChange: 函数(e) {

console.log("picker发送选择变化，携带值", e.detail.value)

this.setData({

multiIndex: e.detail.value

})

//滑动

bindMultiPickerColumnChange: 函数（e）{

console.log("修改的列为", e.detail.column, ", 值为", e.detail.value);

变量数据={

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]=临时；

if ((temp[data.multiIndex[0]].citys).length 0){

//如果第二列“city”的个数大于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 ?区域Arr :[];

}别的{

//如果第二列的“城市”个数不大于0，则第二列的“城市”和第三列的“地区”都被赋值为空数组。

数据.multiArray[1]=[];

数据.multiArray[2]=[];

}

//data.multiArray=[temp, temp[data.multiIndex[0]].citys, temp[data.multiIndex[0]].citys[data.multiIndex[1]].areas];

//setData更新数据

this.setData(数据);

}

}) 注释都在上面的代码中。至于到底如何显示呢？省份：multiArray[0][multiIndex[0]]，城市：multiArray[1][multiIndex[1]]，区：multiArray[2][multiIndex[2]]。得到的是对象的字典键值对。如果需要显示中文就取.name，如果需要获取编码就取.code。

关于微信轻应用：便捷生活新选择和的介绍到此就结束了，不知道你从中找到你需要的信息了吗？如果你还想了解更多这方面的信息，记得收藏关注本站。