文档章节

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

秀杰
 秀杰
发布于 2016/12/30 08:53
字数 739
阅读 673
收藏 1

先来看一下效果图

效果图

本节目标:

1.实现市级方法、县级、镇级Tapped方式

2.点击最终一级,完成地址选择

3.针对不含第4级镇级的,要提前结束操作

1.将Tapped与indexChanged方法合并后,依样画葫芦实现cityTapped方法

	cityTapped: function(e) {
    	// 标识当前点击县级,记录其名称与主键id都依赖它
    	var index = e.currentTarget.dataset.index;
    	// current为1,使得页面向左滑动一页至市级列表
    	// provinceIndex是市区数据的标识
    	this.setData({
    		current: 2,
    		cityIndex: index,
    		cityName: this.data.city[index]
    	});
    	var that = this;
    	//cityObjects是一个LeanCloud对象,通过遍历得到纯字符串数组
    	// getArea方法是访问网络请求数据,网络访问正常则一个回调function(area){}
	    this.getArea(this.data.cityObjects[index].get('aid'), function (area) {
	    	var array = [];
			for (var i = 0; i < area.length; i++) {
				array[i] = area[i].get('name');
			}
			// region就是wxml中渲染要用到的城市数据,regionObjects是LeanCloud对象,用于县级标识取值
			that.setData({
				region: array,
				regionObjects: area
			});
	    });
    },

				<swiper-item>
					<scroll-view scroll-y="true" class="viewpager-listview">
						<view wx:for="{{region}}" wx:key="index" data-index="{{index}}" bindtap="regionTapped">
							<text wx:if="{{index == regionIndex}}" class="area-selected">{{item}}</text>
							<text wx:else>{{item}}</text>
						</view>
					</scroll-view>
				</swiper-item>

2.实现县级,当不含镇级时,current不迭加1,即不向右翻一页。

即将current: 3移到网络请求处:

regionTapped: function(e) {
    	// 标识当前点击镇级,记录其名称与主键id都依赖它
    	var index = e.currentTarget.dataset.index;
    	// current为1,使得页面向左滑动一页至市级列表
    	// regionIndex是县级数据的标识
    	this.setData({
    		regionIndex: index,
    		regionName: this.data.region[index]
    	});
    	var that = this;
    	//townObjects是一个LeanCloud对象,通过遍历得到纯字符串数组
    	// getArea方法是访问网络请求数据,网络访问正常则一个回调function(area){}
	    this.getArea(this.data.regionObjects[index].get('aid'), function (area) {
			// 假如没有镇一级了,关闭悬浮框,并显示地址
			if (area.length == 0) {
				var areaSelectedStr = that.data.provinceName + that.data.cityName + that.data.regionName;
		    	that.setData({
		    		areaSelectedStr: areaSelectedStr
		    	});
		    	that.cascadeDismiss();
		    	return;
			}
	    	var array = [];
			for (var i = 0; i < area.length; i++) {
				array[i] = area[i].get('name');
			}
			// region就是wxml中渲染要用到的县级数据,regionObjects是LeanCloud对象,用于县级标识取值
			that.setData({
	    		current: 3,
				town: array,
				townObjects: area
			});
	    });
    },

3.继而实现了镇级townTapped

    townTapped: function (e) {
    	// 标识当前点击镇级,记录其名称与主键id都依赖它
    	var index = e.currentTarget.dataset.index;
    	// townIndex是镇级数据的标识
    	this.setData({
    		townIndex: index,
    		townName: this.data.town[index]
    	});
    	var areaSelectedStr = this.data.provinceName + this.data.cityName + this.data.regionName + this.data.townName;
    	this.setData({
    		areaSelectedStr: areaSelectedStr
    	});
    	this.cascadeDismiss();
    }

4. 标题栏indicator生成、主动点击切换及被动改变高亮

多加几个text标签,用于显示市、县、镇级

	    	<text class="viewpager-title">{{provinceName}}</text>
	    	<text class="viewpager-title">{{cityName}}</text>
	    	<text class="viewpager-title">{{regionName}}</text>
	    	<text class="viewpager-title">{{townName}}</text>

源码下载:关注下方的公众号->回复数字1007

对小程序开发有趣的朋友关注公众号: 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
SAAS小程序电商产品设计交流

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

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

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

半个鼠标
2018/09/03
155
1
电商微信小程序所带来的盈利点你抓住了吗?

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

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

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

众邦科技
01/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
14
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
15
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部