微信 css area,微信小程序--手写一个地区选择器(多级联动)_阿拉灯神丁Vicky的博客-程序员ITS304

技术标签: 微信 css area  

前言

通过微信小程序官方文档,我们可以看到表单组件中有picker这类滚动选择器。

现支持五种选择器,通过mode来区分,默认是普通选择器。

普通选择器

多列选择器

时间选择器

日期选择器

省市区选择器

需求场景:官方的地区选择器是三级联动,包括省市区,那如果业务场景是两级选择器,只需要省市呢?或者说,城市所对应的value值需要自定义呢?自己手写一个地区选择器会是一个不错的选择。废话不多说,马上撸代码。

开始

1.1 wxml代码

当前选择:

复制代码

微信官方文档描述:

05bf9b2e2c182f4ed78b654849e9e1bb.png

注意:

此处用到多列选择器: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;

复制代码

效果图

26454a2d84965b347fb09b7b69a0c553.png

总结

目前只是实现了部分代码,到生产中还是会加一些功能的。。

学习小程序的时间有点短暂,如有疏漏,还请多多提出,蟹蟹~

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_32142107/article/details/119371834

智能推荐

38.JAVA入门__Switch语句(春夏秋冬)_天天DEBUG的博客-程序员ITS304

Switch语句(春夏秋冬)//case穿透//case穿透//case穿透case后面没有break将会穿透,直到遇到break或者整体switch结束。package class1;// 12个月 输入一个月,判断春夏秋冬import java.util.Scanner;public class thirty_eight {public static void main(String[] args) { // TODO Auto-generated method stub Scan

全连接网络原理_Iseno_V的博客-程序员ITS304_全连接网络原理

全连接网络原理上一期介绍了只包含单隐层的浅层全连接网络,本期介绍更具有普遍性的深层全连接网络。推荐先看一下上期的内容,将更有助于理解。上一期的链接为:https://blog.csdn.net/Iseno_V/article/details/102941210公式推导部分依旧采用截图的形式,如果需要源文档可以给我留言。1. 网络结构图下图为一个2分类问题的四层结构全连接网络。2. 原...

处理垃圾短信的方法(10086999)_五角大寨的博客-程序员ITS304

最近老收到垃圾短信,烦死了,一急找到一个好的解决办法。  首先编辑你收到的垃圾短信,就是在原短信前加上发送号码,加*号,转发给10086999,很快,你就收到电信的回复: 尊敬的客户:您向我公司转发的不良信息已收到,感谢您对中国移动的支持和关心,我公司将会根据您提供的信息联合社会各界进行查证和处理,谢谢!  要注意的就是不能转发彩信,如果垃圾短信是用彩信发的就把彩信

mupdf将pdf文件中的某页导出成图片_weixin_34026484的博客-程序员ITS304

2019独角兽企业重金招聘Python工程师标准>>> ...

Shiro <shirohasPermission 标签不生效,shiro权限不生效原因_m0_67402970的博客-程序员ITS304

第一个可能配置文件:shiroConfig.java没加这个/** * 开启Shiro的注解(如@RequiresRoles,@RequiresPermissions),需借助SpringAOP扫描使用Shiro注解的类,并在必要时进行安全逻辑验证 * 配置以下两个bean(DefaultAdvisorAutoProxyCreator和AuthorizationAttributeSourceAdvisor)即可实现此功能 * @return */ @Bean @ConditionalO

arm cef3 linux 编译_CEF3手把手入门教程-Chrome内核浏览器控件_聂家麒的博客-程序员ITS304

目录一、编译CEF3里的lib:1.下载CEF3http://opensource.spotify.com/cefbuilds/index.html2.下载CMake,运行CMake_GUI.exe3.CMake设置CEF3的Sources文件夹路径,与新new build路径后,点击“Configure”4.选择编译平台,无后缀表示32位,ARM,Win64表示各自平台,这里我们选择VS2017...

随便推点

人脸属性分析--性别、年龄和表情识别_迷若烟雨的博客-程序员ITS304_人脸属性识别

人脸属性指的是根据给定的人脸判断其性别、年龄和表情等,当前在github上开源了一些相关的工作,大部分都是基于tensorflow的,还有一部分是keras,CVPR2015曾有一篇是用caffe做的.CSDN从0到1实现基于Tornado和Tensorflow的人脸、年龄、性别识别基于caffe的表情识别tensorflow练习12:利用图片预测年龄与性别怎样用Keras识别...

模拟aloha协议_Addmana的博客-程序员ITS304

clearG = 5:0.01:0.1;n=length(G);t0=0.5;i=0;u=0;b=0;tb = 0;tu=0;ti=0;for j = 1:length(G)r = exprnd(G(j),1,n);if r(j)<t0 b=b+1; tb = r(j)+t0;elseif r(j)>t0 u=u+1; ti =ti+(r(j

和机器学习和计算机视觉相关的数学_FrankJingle的博客-程序员ITS304

1. 线性代数 (Linear Algebra): 我想国内的大学生都会学过这门课程,但是,未必每一位老师都能贯彻它的精要。这门学科对于Learning是必备的基础,对它的透彻掌握是必不可少的。我在科大一年级的时候就学习了这门课,后来到了香港后,又重新把线性代数读了一遍,所读的是Introduction to Linear Algebra (3rd Ed.)  by Gilbert Str

ipad air4和ipad pro2020的区别 哪个性价比高_sdsadwe的博客-程序员ITS304

iPad Air4 和iPad Pro2020 都是采用全面屏设计,iPad Air4 尺寸为10. 9 英寸、iPad Pro2020 为 11 英寸和12. 9 英寸 平板选ipad air4还是ipad pro2020这些点很重要看过你就懂了http://www.adiannao.cn/22、解锁方式iPad Air4 为电源指纹解锁,iPad Pro2020 为Face ID面容解锁,使用体验上,iPad Pro2020 属于更高端的方式3、性能上,iPad Air4 处理器为A14 芯片,5

Qt软件开发文档16---软件更新:写入程序版本信息并读取程序的版本号_zb872676223的博客-程序员ITS304

实现软件更新,需要写入本地软件的版本号,并读取出来,与服务器版本号相比较,决定是否进行软件的更新。1.写入版本信息:写入一个rc文件,并将其导入到Qt工程中。 在Qt工程中,利用RC_FILE+=version.rc 导入工程 QT+VS编译时,利用cmake导入工程即可. 代码如下:  IDI_ICON1 ICON DISCARDABLE &quot;LYL/icons/tub...

2021Android高级面试题总结:字节跳动Android岗经典面试真题,面经解析_砸键盘的程序员的博客-程序员ITS304

背景曾经有人问我,为什么要下班了不找点乐子,还花这么多时间去写一份资料。你是不是傻!我无言以对!但是不得不说,这份笔记确实倾注了我很多心血。至于,我为什么要做这份资料,为什么又要写这篇文章!是因为我跟我的好基友打了个赌,我们一人做一份资料。到时候一起传到网上,看谁的文章效果好,输了就请对方&nbsp;吃一个月的饭!(按他的奢侈程度,我应该会破产)一、Android面试题Android面试题包括Android基础,还有一些源码级别的、原理这些等。所以想去大公司面试,一定要多看看源码和实现方式,常用

推荐文章

热门文章

相关标签