2019獨角獸企業重金招聘Python工程師標準>>>

通過本文可以讀到：

省級上下滾動展示scroll-view基本用法

省市級之間左右滑動展示swiper基本用法

data-index傳值方法，wx:for循環語句、wf:if條件判斷語句寫法

先看下最終效果：

一、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

二、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

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

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

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

實現事件：

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

如圖：

四、實現市級數據加載

為了記錄點擊的是哪一個省，設定一個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>

效果如下：

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

目前點擊選中的省份沒有高亮，不是很醒目，于是加上一個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樣式。

效果如下：

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

<text class="viewpager-title">{{provinceName}}</text>this.setData({current: 1,provinceIndex: index,provinceName: this.data.province[index]});

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

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

轉載于:https://my.oschina.net/huangxiujie/blog/812791

總結

以上是生活随笔為你收集整理的微信小程序电商系统省市区选择器（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。