无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 行业新闻 >

mpvue手机微信微信小程序两列挑选器使用方法之省

时间:2021-04-05 03:00来源:未知 作者:jianzhan 点击:
手机微信微信小程序默认设置帮我们出示了一个省份区的picker挑选器,只需将mode设定为region就可以pickermode="region"bindchange="bindRegionChange"value="{{region}}"custom-item="{{customItem}}"由于微信小程序

手机微信微信小程序默认设置帮我们出示了一个省份区的picker挑选器,只需将mode设定为region就可以

 picker
 mode="region"
 bindchange="bindRegionChange"
 value="{{region}}"
 custom-item="{{customItem}}"
 

由于微信小程序默认设置出示的省份区挑选器只有储存名字,不可以储存id,并且因为我不用挑选三级大城市,因此这儿准备根据mode="multiSelector"来完成省区大城市的挑选

大城市数据信息json文件格式

有关省区大城市数据信息的获得,这儿我根据插口去获得数据信息,回到的json文件格式为

 "code": 0,
 "msg": "success",
 "data": [
 "id": 2,
 "name": "北京市",
 "children": [
 "id": 36,
 "name": "北京市市"
}

在大家储存递交的情况下只必须储存省区和大城市的id就可以

picker两列挑选器的使用方法

 picker
 mode="multiSelector"
 @change="bindCityChange"
 @columnchange="bindCityColumnChange"
 :value="multiIndex"
 :range="multiArray"
 range-key="name"
 view 挑选大城市{{userInfo.province.name}},{{userInfo.city.name}} /view 
 /picker 

设定picker mode特性为multiSelector

 mode="multiSelector"

1、这儿必须留意的是,在mpvue中没法立即应用bindchange和bindcolumnchange,

2、value是一数量组,比如大家有多列

[["北京市", "湖南省"], ["长沙市", "永州"]]

3、range也是一数量组,特定的是value值的选定数据库索引值,下标从0刚开始,如[0,0]

4、假如大家的数据信息是一个二维目标数字能量数组,大家能够根据应用range-key来特定Object 中 key 的值做为挑选器显示信息內容

5、

// 大城市挑选 获得选定的值 [0,0] 这儿必须留意的是获得值的方法在mpvue中通快递过e.mp.detail.value而并不是e.detail.value
 bindCityChange(e) {
 // 选定的值数据库索引
 console.log(e.mp.detail.value[0], e.mp.detail.value[1]);
 // 选定的省区和大城市数据信息
 console.log(
 this.multiArray[0][e.mp.detail.value[0]],
 this.multiArray[1][e.mp.detail.value[1]]
 this.userInfo.province = this.multiArray[0][e.mp.detail.value[0]];
 this.userInfo.city = this.multiArray[1][e.mp.detail.value[1]];
 },

6、

7、根据e.mp.detail.column和e.mp.detail.value能够获得到改动列相匹配的值

console.log(
 "改动的列入",
 e.mp.detail.column,
 ",数值",
 e.mp.detail.value
 );

根据获得到改动的数据信息升级multiIndex的值

// 监视翻转恶性事件 翻转第一列 改动第二列数据信息
 bindCityColumnChange(e) {
 // 升级multiIndex的值
 this.multiIndex[e.mp.detail.column] = e.mp.detail.value;
 //载入相匹配省区下大城市数据信息
 switch (e.mp.detail.column) {
 case 0:
 // this.multiArray[1] = this.cityList[e.mp.detail.value].children;
 this.multiArray = [
 this.cityList,
 this.cityList[e.mp.detail.value].children
 break;
 },

miniprogram/dev/

小结

之上便是本文的所有內容了,期待文中的內容对大伙儿的学习培训或是工作中具备一定的参照学习培训使用价值,假如有疑惑大伙儿能够留言板留言沟通交流,感谢大伙儿对诺心互联网的适用。

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信