微信小程序 省市区选择器实例详解(附源码下载)
微信小程序 省市区选择器:最近学习微信小程序,为了检验自己的学习效果,自己做一个小示例,网上搜索下类似的实例,发现这个更好,大家看下。一、区域间手势滑动切换,标题栏高亮随之切换 思路是:拿当前的current来决定高亮样式 1.监听swiper滚动到的位置: currentChanged: function (e) {
// swiper滚动使得current值被动变化,用于高亮标记 var current = e.detail.current; this.setData({ current: current }); } 2.布局文件中做条件判断,是否加上高亮样式,其中area-selected是目标样式,color: red; 3.点击上级时为下一级赋予“请选择”字样 其他级别以其类推。 效果如下: 二、标题栏点击切换,则区域间也随着切换 标题栏 效果如下: 数据绑定用起来果然是爽,寥寥几句代码完成了点击切换,要是别的平台的写同样的功能,这要写半天。 三、回到前一级点击某区域后,要自动将往后级的数组、index、name、array清空,否则逻辑错乱了。 例如,依次选择了北京-朝阳区-三环以内之后,又回到了省级选择了浙江省,此时二级三级区域都还是原先所选的朝阳区-三环以内,左右滑动区域内容也显示的是错的。 为了解决这个bug,需要再次处理tapped点击事件,将子级的选择清空。 }
效果如下: 四、修正一初始化即提供4个swiper-item的bug处理方式是加一个数组的元素个数是否为零,例如城市当它有值才显现 相应地在js文件中生成它 注意这里是将current的setData操作移到region与regionObject之下了,保证了先有值再控制swiper的位移。 最后上一个与原生picker写的对比gif图: 不用在picker上反复点击反复选择,也不会出现跨级点击的问题,体验上是不是有好一点呢? 源码下载: 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |