微信小程序电商系统省市区选择器(四)

原创
2016/12/30 18:27
阅读数 2.9K

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

思路是:拿当前的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,陆续还将推出更多作品。

公众号

展开阅读全文
打赏
0
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部