微信小程序默认给我们提供了一个省市区选的选择器,只需将模式设置为地区即可
& lt;选择器
模式="地区"
bindchange=" bindRegionChange "
值=" https://www.yisu.com/zixun/{{地区}}”
custom-item=" {{customItem}} "
在
因为小程序默认提供的省市区选择器只能保存名称,不能保存id,而且我也不需要选择三级城市,所以这里打算通过<代码>模式=癿ultiSelector”来实现省份城市的选择
关于省份城市数据的获取,这里我通过接口去获取数据,返回的json格式为
{
“代码”:0,
“味精”:“成功”,
“数据”:(
{
“id”:2
“名称”:“北京”,
“孩子”:(
{
“id”:36岁,
“名称”:“北京市”
}
]
}
]
}
在我们保存提交的时候只需要保存省份和城市的id即可
& lt;选择器
模式=" multiSelector "
@change=" bindCityChange "
@columnchange=" bindCityColumnChange "
:value=" https://www.yisu.com/zixun/multiIndex "
范围:=" multiArray "
range-key="名称"
比;
& lt;视图类=把≡衿鳌痹谘≡癯鞘衶{userInfo.province.name}}, {{userInfo.city.name}} & lt;/view>
& lt;/picker>
设置选择模式属性为multiSelector
模式=" multiSelector "
1,这里需要注意的是,在mpvue中无法直接使用bindchange和bindcolumnchange,而是使用@change和@columnchange这种方式
2,价值是一个数组,例如我们有两列
[[“北京”、“湖南”],[“长沙”、“永州“]]
3,范围也是一个数组,指定的是价值值的选中索引值,下标从0开始,如(0,0)
4,如果我们的数据是一个二维对象数组,我们可以通过使用range-key来指定对象中键的值作为选择器显示内容
5,当我们确认选中之后会触发@change事件
//城市选择获取选中的值(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。?this.multiArray [0] [e.mp.detail.value [0]);
this.userInfo。城市=this.multiArray [1] [e.mp.detail.value [1]];
},
6,在我们滚动每一列的值的时候会触发@columnchange事件
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;//加载对应省份下城市数据
开关(e.mp.detail.column) {
例0://这个。multiArray [1]=this.cityList [e.mp.detail.value]定格;
这一点。multiArray=[
this.cityList,
this.cityList e.mp.detail.value定格
];
打破;
}
},
数据(){
返回{
multiIndex: (0, 0),
multiArray: [],
}
}
<强>参考阅读
<李> https://www.jb51.net/article/121309.htm
<李> https://developers.weixin.qq.com/miniprogram/dev/component/picker.html
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
