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

前言

通过微信小程序官方文档,我们可以看到表单组件中有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
    评论
微信小程序是一种基于微信平台的应用的开发模式,可以快速的开发出符合用户需求的小程序。在小程序的开发中,组件是一个非常重要的概念,通过组件可以实现复用性和模块化编程思想。 组件应用是小程序开发的基础。通过组件可以将某一模块化并封装起来,使得组件可以在不同的页面间得到复用,大大提升了开发效率并减少了代码冗余。微信小程序提供了丰富的自带组件,包括文本、图片、按钮、输入框等等,开发者也可以自己开发组件来满足自己的需求。实际开发中,通过组件可以快速搭建页面框架和业务逻辑。 Demo是一个演示小程序的示例程序。在小程序的实际开发过程中,一个好的Demo非常重要。通过Demo,开发人员可以更深入的了解小程序的开发流程、组件的应用和实际的业务开发等等。在Demo中,通常会包括小程序的一些基础操作,如页面跳转、数据绑定、组件的使用等。而在实际开发中,Demo还会包括一些复杂的业务场景,如支付、登录、数据列表展示等等。Demo不仅为开发者提供了学习和实践的机会,也方便了使用者了解该小程序的功能和特点。 总之,微信小程序组件的应用和Demo的开发都是小程序开发过程中非常重要的两个部分。良好的组件应用和精心设计的Demo,可以在极短的时间内实现小程序开发。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值