前言
通过微信小程序官方文档,我们可以看到表单组件中有picker这类滚动选择器。 现支持五种选择器,通过mode
来区分,默认是普通选择器。
- 普通选择器
- 多列选择器
- 时间选择器
- 日期选择器
- 省市区选择器
需求场景:官方的地区选择器是三级联动,包括省市区,那如果业务场景是两级选择器,只需要省市呢?或者说,城市所对应的value值需要自定义呢?自己手写一个地区选择器会是一个不错的选择。废话不多说,马上撸代码。
开始
1.1 wxml代码
<picker mode="multiSelector" bindchange="bindchange" bindcolumnchange="bindAreaChange" range="{{areaList}}" range-key="name" value="{{address}}">
<view class="picker">
当前选择:
</view>
</picker>
复制代码
微信官方文档描述:
注意:
- 此处用到多列选择器:
mode = multiSelector
(最低版本:1.4.0)- 由于引入的地区文件
area.js
是城市和地区都在一起,用name
和value
作为属性,所以选择range
为二维Object
这种类型,配合range-key
一起使用。
1.2 js代码
第一步:引入地区文件
const area = require('../../common/area.js');
复制代码
第二步:初始化省份列表,并默认展示市
this.province = area.filter(v => !v.parent )
this.bindAreaChange({
detail: {
column: 0,
value: 0
}
})
复制代码
第三步:省份触发
change
事件
bindAreaChange:function(e){
if(e.detail.column==0){//判断当前改变的是第一列,下标从0开始
const index = e.detail.value;//获取选中下标
const current_province = this.province[index];
const all_city = area.filter(v => v.parent == current_province.value )
this.setData({
areaList:[this.province,all_city]
})
}
}
复制代码
1.3 area.js
数据结构长这样
const address = [{
"name": "安徽省",
"value": "1"
},
{
"name": "合肥市",
"parent": "1",
"value": "***"//此处省略n个字,/偷笑
},
{
"name": "安庆市",
"parent": "1",
"value": "***"
}]
module.exports = address;
复制代码
效果图
总结
- 目前只是实现了部分代码,到生产中还是会加一些功能的。。
- 学习小程序的时间有点短暂,如有疏漏,还请多多提出,蟹蟹~