文档章节

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

秀杰
 秀杰
发布于 2016/12/30 18:27
字数 840
阅读 1795
收藏 1

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

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

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

公众号

© 著作权归作者所有

秀杰
粉丝 153
博文 94
码字总数 50956
作品 0
瑞安
iOS工程师
私信 提问
小程序商城模块 Oejia_weshop v0.1.5 发布,新版的 UI 系列优化

概述 oejia_weshop 是 Odoo 对接微信小程序实现的商城应用。 如果您使用odoo的销售模块,而想要在微信小程序上实现自己的商城卖odoo里的商品,装上 oejia_weshop 模块即可。 如果您想要搭建一...

软践
09/30
1K
2
电商微信小程序所带来的盈利点你抓住了吗?

  电商微信小程序正在不断的深入到各个行业和领域当中,无论是传统电商、垂直电商、实体店等等,都可以通过电商微信小程序来实现更好的引流和盈利。但是面对着电商所带来的盈利点,你都抓住...

公众开发运营官网
10/17
0
0
众邦科技/CRMEB微信小程序商城

CRMEB客户管理+电商管理系统 本项目还在不断开发完善中,如有建议或问题请在这里提出 如果对您有帮助,您可以点右上角 "Star" 支持一下 谢谢! 帮助文档 公众号和小程序打通版 https://gitee....

众邦科技
01/11
0
0
SAAS小程序电商产品设计交流

错过了4年前的公众号开发,还要继续错过火爆的小程序开发吗? 今天活动的主题是:SAAS小程序电商产品如何开发与设计? 前言: 蜗店,是微信第三方开发服务商平台、可以帮助每一个企业解决通用...

半个鼠标
2018/09/03
256
1
SAAS小程序电商产品设计交流

错过了4年前的公众号开发,还要继续错过火爆的小程序开发吗? 今天活动的主题是:SAAS小程序电商产品如何开发与设计? 前言: 蜗店,是微信第三方开发服务商平台、可以帮助每一个企业解决通用...

半个鼠标
2018/09/03
155
1

没有更多内容

加载失败,请刷新页面

加载更多

thinkphp6 视图变量输出

thinkphp6 视图变量输出 视图默认把变量输出为字符串类型,有些时候需要保证原来的类型,比如html字符串 raw参数,禁止转换 {$content.content|raw} 支持多个参数,比如解码php内置的htmlspe...

DrChenXX
9分钟前
2
0
【搞定Jvm面试】 Java 内存区域揭秘附常见面试题解析

本文已经收录自笔者开源的 JavaGuide: https://github.com/Snailclimb (【Java学习+面试指南】 一份涵盖大部分Java程序员所需要掌握的核心知识)如果觉得不错的还,不妨去点个Star,鼓励一下!...

SnailClimb
19分钟前
2
0
jQuery如何根据数据属性值查找元素?

我有以下场景: var el = 'li'; 页面上有5个<li> ,每个都有一个data-slide=number属性(数字分别为1,2,3,4,5) 。 我现在需要找到当前活动的幻灯片编号,该编号映射到var current = $('ul...

javail
31分钟前
3
0
LaTeX自定义宏包、类文件的默认搜索路径设置方法

  对于自定义的LaTeX宏包与类,在调用时可以通过在命令\documentclass{}与\usepackage{}命令中指定完整路径或者相对路径,这样确实可以调用,但是编译时总是有烦人的警告信息,让人不爽。还...

陆巍_
33分钟前
3
0
计算机电子书 2018 BiliDrive 备份

下载方式 根据你的操作系统下载不同的 BiliDrive 二进制。 执行: bilidrive download <link> 链接 <!--more--> 文档 链接 Webpack 中文指南.epub (409.01 KB) bdrive://ce58b7b58292296a61......

ApacheCN_飞龙
53分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部