微信小程序--手写一个地区选择器(多级联动)

前言

通过微信小程序官方文档,我们可以看到表单组件中有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>
复制代码

微信官方文档描述:

注意:

  1. 此处用到多列选择器:mode = multiSelector(最低版本:1.4.0)
  2. 由于引入的地区文件area.js是城市和地区都在一起,用namevalue作为属性,所以选择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;
复制代码

效果图

总结

  1. 目前只是实现了部分代码,到生产中还是会加一些功能的。。
  2. 学习小程序的时间有点短暂,如有疏漏,还请多多提出,蟹蟹~

转载于:https://juejin.im/post/5b99ca30e51d450e41152f4f

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值