微信小程序地区选择器怎么开发?

　　微信小程序地区选择器怎么开发?我们在使用类似外卖的软件的时候，都会让您勾选地区，这实际就是地区选择器哦，微信小程序地区选择器怎么开发呢?以下就是微信小程序地区选择器的实现方法。

　　微信小程序地区选择器怎么开发?

　　移动开发中城市选择器在微信小程序开发过程中必不可少哦，微信小程序地区选择器的效果图如下：

　　微信小程序地区选择器开发需要的微信小程序代码如下：

　　一、区域间手势滑动切换，标题栏高亮随之切换

　　思路是：拿当前的current来决定高亮样式

　　1.监听小程序swiper滚动到的位置：

　　currentChanged: function (e) { // swiper滚动使得current值被动变化，用于高亮标记 var current = e.detail.current; this.setData({ current: current }); }

　　2.布局文件中做条件判断，是否加上高亮样式，其中area-selected是目标小程序样式，color: red;

　　3.点击上级时为下一级赋予“请选择”字样

　　provinceTapped: function(e) {... that.setData({ cityName: '请选择', city: array, cityObjects: area });...}

　　二、标题栏点击切换，则区域间也随着切换

　　changeCurrent: function (e) { // 记录点击的标题所在的区级级别 var current = e.currentTarget.dataset.current; this.setData({ current: current }); }

　　数据绑定用起来果然是爽，寥寥几句代码完成了点击切换，要是别的平台的写同样的小程序功能，这要写半天。

　　三、回到前一级点击某区域后，要自动将往后级的数组、index、name、array清空，否则逻辑错乱了。

　　例如，依次选择了北京-朝阳区-三环以内之后，又回到了省级选择了浙江省，此时二级三级区域都还是原先所选的朝阳区-三环以内，左右滑动区域内容也显示的是错的。

　　为了解决这个bug，需要再次处理tapped点击事件，将子级的选择清空。

　　四、修正一初始化即提供4个swiper-item的bug

　　处理方式是加一个数组的元素个数是否为零，例如城市当它有值才显现。

　　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的位移。

　　微信小程序地区选择器怎么开发?以上就是微信小程序地区选择器的开发内容了，如果您的微信小程序需要地区选择器，那么您可以参考以上的方法去完善您的小程序哦，请多关注微小乔。

相关推荐：

如何实现小程序下拉框组件编辑？

微信小程序下拉框开发代码

微信小程序地区下拉框怎么制作?