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

2019独角兽企业重金招聘Python工程师标准>>>

先来看一下效果图

本节目标：

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，陆续还将推出更多作品。

转载于:https://my.oschina.net/huangxiujie/blog/815842