微信小程序|小程序开发
微信小程序 省市区 选择器
微信小程序-小程序开发
微信小程序 省市区选择器：
借贷管理 源码,vscode 代码总行数,lammps在ubuntu,tomcat首页能打开,sqlite大数据库读取,爬虫学的好能干什么工作,金坛php,益阳网页优化seo方案,网站通知源码,个人声明模板lzw
最近学习微信小程序，为了检验自己的学习效果，自己做一个小示例，网上搜索下类似的实例，发现这个更好，大家看下。
租房网源码下载,ubuntu如何中断进程,python 高级爬虫实例,getstmt函数php,家具seo团队lzw
A、区域间手势滑动切换，标题栏高亮随之切换
局域网聊天源码,ubuntu子系统桌面,tomcat6 解压版,爬虫vip小说,php存入sqlserver乱码,百度seo优化推广多少钱一年lzw
思路是：拿当前的current来决定高亮样式
1.监听swiper滚动到的位置：
currentChanged: function (e) { // swiper滚动使得current值被动变化，用于高亮标记 var current = e.detail.current; this.setData({current: current }); }
2.布局文件中做条件判断，是否加上高亮样式，其中area-selected是目标样式，color: red;
{{provinceName}}{{provinceName}} {{cityName}}{{cityName}} {{regionName}}{{regionName}} {{townName}}{{townName}}
3.点击上级时为下一级赋予“请选择”字样
provinceTapped: function(e) {...that.setData({ cityName: 请选择, city: array, cityObjects: area});...}
其他级别以其类推。
效果如下：
B、标题栏点击切换，则区域间也随着切换
changeCurrent: function (e) { // 记录点击的标题所在的区级级别 var current = e.currentTarget.dataset.current; this.setData({current: current }); }
标题栏上绑定点击事件
效果如下：
数据绑定用起来果然是爽，寥寥几句代码完成了点击切换，要是别的平台的写同样的功能，这要写半天。
C、回到前一级点击某区域后，要自动将往后级的数组、index、name、array清空，否则逻辑错乱了。
例如，依次选择了北京-朝阳区-三环以内之后，又回到了省级选择了浙江省，此时二级三级区域都还是原先所选的朝阳区-三环以内，左右滑动区域内容也显示的是错的。
为了解决这个bug，需要再次处理tapped点击事件，将子级的选择清空。
provinceTapped: function(e) { // 标识当前点击省份，记录其名称与主键id都依赖它 var index = e.currentTarget.dataset.index; // current为1，使得页面向左滑动一页至市级列表 // provinceIndex是市区数据的标识 this.setData({current: 2,cityIndex: index,regionIndex: -1,townIndex: -1,cityName: this.data.city[index],regionName: \,townName: \, region: [], town: [] });... }
D、修正一初始化即提供4个swiper-item的bug
处理方式是加一个数组的元素个数是否为零，例如城市当它有值才显现
0}}"> {{item}}{{item}}
相应地在js文件中生成它
this.setData({-current: 2, cityIndex: index, regionIndex: -1, townIndex: -1, this.setData({ region: array, regionObjects: area });+// 确保生成了数组数据再移动swiper+that.setData({+ current: 2+});});
注意这里是将current的setData操作移到region与regionObject之下了，保证了先有值再控制swiper的位移。
最后上一个与原生picker写的对比gif图：
不用在picker上反复点击反复选择，也不会出现跨级点击的问题，体验上是不是有好一点呢？
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
更多微信小程序 省市区选择器实例详解相关文章请关注PHP中文网！
