微信小程序電商系統省市區選擇器（二）

經過本文能夠讀到：

1. 省級上下滾動展現scroll-view基本用法
2. 省市級之間左右滑動展現swiper基本用法
3. data-index傳值方法，wx:for循環語句、wf:if條件判斷語句寫法

先看下最終效果：

1、scroll-view

1. scroll-view組件佈局

<scroll-view scroll-y="true" class="viewpager-listview">
		    	<view wx:for="{{province}}" wx:key="index">{{item}}</view>
	    	</scroll-view>

解釋：scroll滾動方向項默認值是false，因而將scroll-y設爲true。

效果如圖：

2.相應的樣式表這麼寫：

/*地址列表ListView容器*/
.viewpager-listview {
	padding-top: 5px;
	height: 220px;
}

/*每行地址item項*/
.viewpager-listview view{
	line-height: 30px;
	padding: 0 10px;
}

說明：height: 220px高度是必選項，不然上下滾動無效。

如圖：

文檔傳送門：https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html

2、swiper

<swiper class="swiper-area">
				<swiper-item>
					<scroll-view scroll-y="true" class="viewpager-listview">
						<view wx:for="{{province}}" wx:key="index">{{item}}</view>
					</scroll-view>
				</swiper-item>
			</swiper>

.swiper-area {
	height:220px;
}

說明：上面寫的scroll-view包在<swiper-item>標籤裏就能夠了，樣式表裏定義height便可，indicator-dots="true" autoplay="true" interval="5000" duration="1000"對於作首頁輪播廣告大圖有必要，而這裏不須要。

文檔傳送門：https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html

3、點擊省級觸發swiper滾動事件

方法是設置swiper的current屬性值 <swiper current={{current}}>

綁定事件：<view wx:for="{{province}}" wx:key="index" bindtap="provinceTapped">{{item}}</view>

實現事件：

provinceTapped: function() {
    	this.setData({
    		current: 1
    	});
    }

如圖：

4、實現市級數據加載

爲了記錄點擊的是哪個省，設定一個data-index="{{index}}"來標識

<view wx:for="{{province}}" wx:key="index" data-index="{{index}}" bindtap="provinceTapped">{{item}}</view>

在相應的js代碼中記錄下來該index，並觸發省級改變事件this.provinceIndexChanged(index)

provinceTapped: function(e) {
        // 標識當前點擊省份，記錄省份名稱與主鍵id都依賴它
    	var index = e.currentTarget.dataset.index;
    	this.setData({
    		current: 1,
    		provinceIndex: index
    	});
    	this.provinceIndexChanged(index);
    },

provinceIndexChanged實現以下：

provinceIndexChanged: function(index) {
            //provinceObjects是一個leanCloud對象，經過遍歷獲得純字符串數組
            // getArea方法是訪問網絡請求數據，網絡訪問正常則一個回調function(area){}
	    this.getArea(this.data.provinceObjects[index].get('aid'), function (area) {
	    	var array = [];
			for (var i = 0; i < area.length; i++) {
				array[i] = area[i].get('name');
			}
                        // city就是wxml中渲染要用到的城市數據，cityObjects是LeanCloud對象，用於縣級標識取值
			that.setData({
				city: array,
				cityObjects: area
			});
	    });
	},

最後就是將city數據渲染到wxml了

<view wx:for="{{city}}" wx:key="index" data-index="{{index}}" bindtap="cityTapped">{{item}}</view>

效果以下：

5、高亮列表當前選中省份

目前點擊選中的省份沒有高亮，不是很醒目，因而加上一個area-selected樣式爲紅色

原來的省份代碼修改以下：

<view wx:for="{{province}}" wx:key="index" data-index="{{index}}" bindtap="provinceTapped">
								<text wx:if="{{index == provinceIndex}}" class="area-selected">{{item}}</text>
								<text wx:else>{{item}}</text>
							</view>

若是數組index下標等於當於provinceIndex，就設定一個area-selected樣式。

效果以下：

6、美化標題，由請選擇顯示爲當前省份名稱

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

    	this.setData({
    		current: 1,
    		provinceIndex: index,
    		provinceName: this.data.province[index]
    	});

源碼下載：關注下方的公衆號->回覆數字1007

對小程序開發有趣的朋友關注公衆號: huangxiujie85，QQ羣: 581513218，微信: small_application，陸續還將推出更多做品。