微信小程序电商系统省市区选择器(四)
2016-12-30 00:00
507 查看
摘要: 区域间手势滑动切换,标题栏高亮随之切换,反之亦然;当前选中标题红色高亮;回到前一级点击某区域后,清空子代的区域。
1.监听swiper滚动到的位置:
2.布局文件中做条件判断,是否加上高亮样式,其中area-selected是目标样式,color: red;
3.点击上级时为下一级赋予“请选择”字样
其他级别以其类推。
效果如下:
标题栏<text>上绑定点击事件
效果如下:
数据绑定用起来果然是爽,寥寥几句代码完成了点击切换,要是别的平台的写同样的功能,这要写半天。
为了解决这个bug,需要再次处理tapped点击事件,将子级的选择清空。
效果如下:
相应地在js文件中生成它
注意这里是将current的setData操作移到region与regionObject之下了,保证了先有值再控制swiper的位移。
最后上一个与原生picker写的对比gif图:
不用在picker上反复点击反复选择,也不会出现跨级点击的问题,体验上是不是有好一点呢?
源码下载:http://git.oschina.net/dotton/lendoo-wx
对小程序开发有趣的朋友关注公众号: huangxiujie85,QQ群: 581513218,微信: small_application,陆续还将推出更多作品。
一、区域间手势滑动切换,标题栏高亮随之切换
思路是:拿当前的current来决定高亮样式1.监听swiper滚动到的位置:
<swiper class="swiper-area" current="{{current}}" bindchange="currentChanged"> currentChanged: function (e) { // swiper滚动使得current值被动变化,用于高亮标记 var current = e.detail.current; this.setData({ current: current }); }
2.布局文件中做条件判断,是否加上高亮样式,其中area-selected是目标样式,color: red;
<text class="viewpager-title"> <text wx:if="{{current == 0}}" class="area-selected">{{provinceName}}</text> <text wx:else>{{provinceName}}</text> </text> <text class="viewpager-title"> <text wx:if="{{current == 1}}" class="area-selected">{{cityName}}</text> <text wx:else>{{cityName}}</text> </text> <text class="viewpager-title"> <text wx:if="{{current == 2}}" class="area-selected">{{regionName}}</text> <text wx:else>{{regionName}}</text> </text> <text class="viewpager-title"> <text wx:if="{{current == 3}}" class="area-selected">{{townName}}</text> <text wx:else>{{townName}}</text> </text>
3.点击上级时为下一级赋予“请选择”字样
provinceTapped: function(e) { ... that.setData({ cityName: '请选择', city: array, cityObjects: area }); ... }
其他级别以其类推。
效果如下:
二、标题栏点击切换,则区域间也随着切换
changeCurrent: function (e) { // 记录点击的标题所在的区级级别 var current = e.currentTarget.dataset.current; this.setData({ current: current }); }
标题栏<text>上绑定点击事件
<text class="viewpager-title" bindtap="changeCurrent" data-current="0">
效果如下:
数据绑定用起来果然是爽,寥寥几句代码完成了点击切换,要是别的平台的写同样的功能,这要写半天。
三、回到前一级点击某区域后,要自动将往后级的数组、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: [] }); ... }
效果如下:
四、修正一初始化即提供4个swiper-item的bug
处理方式是加一个数组的元素个数是否为零,例如城市当它有值才显现<block wx:if="{{city.length > 0}}"> <swiper-item> <scroll-view scroll-y="true" class="viewpager-listview"> <view wx:for="{{city}}" wx:key="index" data-index="{{index}}" bindtap="cityTapped"> <text wx:if="{{index == cityIndex}}" class="area-selected">{{item}}</text> <text wx:else>{{item}}</text> </view> </scroll-view> </swiper-item> </block>
相应地在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上反复点击反复选择,也不会出现跨级点击的问题,体验上是不是有好一点呢?
源码下载:http://git.oschina.net/dotton/lendoo-wx
对小程序开发有趣的朋友关注公众号: huangxiujie85,QQ群: 581513218,微信: small_application,陆续还将推出更多作品。
相关文章推荐
- 微信小程序电商系统省市区选择器(三)
- 微信小程序电商系统省市区选择器(二)
- 微信小程序电商系统省市区选择器(一)
- 灵动电商开源系统之微信小程序
- 微信小程序 省市区选择器实例详解(附源码下载)
- 微信小程序省市区选择器对接数据库
- 微信小程序----picker选择器(picker、省市区选择器)(MUI选择器)
- 微信小程序开发之城市选择器 城市切换
- 微信小程序开发之用户系统 一键登录 获取session_key和openid
- 迅雷首席架构师刘智聪:微信小程序的架构与系统设计的几点观感
- 微信小程序学习:使用picker封装省市区三级联动模板
- 微信小程序 选择器(时间,日期,地区)实例详解
- 微信小程序购物商城系统开发系列-目录结构
- 仿照微信的效果,实现了一个支持多选、选原图和视频的图片选择器,适配了iOS6-9系统,3行代码即可集成.
- 建站集成软件包 XAMPP搭建后台系统与微信小程序开发
- 微信小程序开发之选择器 时间选择器 日期选择器 地区选择器
- 微信小程序学习(4)-系统配置app.json
- 基于微信的微交易系统开发“小程序”初试牛刀
- 仿照微信的效果,实现了一个支持多选、选原图和视频的图片选择器,适配了iOS6-9系统,3行代码即可集成.
- 微信小程序例子——获取手机系统信息