Posted in Javascript onJanuary 05, 2017
微信小程序 省市区选择器:
最近学习微信小程序,为了检验自己的学习效果,自己做一个小示例,网上搜索下类似的实例,发现这个更好,大家看下。
一、区域间手势滑动切换,标题栏高亮随之切换
思路是:拿当前的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 }); ... }
其他级别以其类推。
效果如下:
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
微信小程序 省市区选择器实例详解(附源码下载)
- Author -
秀杰声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@