微信小程序省市區(qū)選擇器實例詳解(附源碼下載)

更新時間：2017年01月05日 16:52:44 作者：秀杰

這篇文章主要介紹了微信小程序省市區(qū)選擇器實例詳解的相關(guān)資料,區(qū)域間手勢滑動切換，標題欄高亮隨之切換，反之亦然；當前選中標題紅色高亮；回到前一級點擊某區(qū)域后，清空子代的區(qū)域，需要的朋友可以參考下

微信小程序省市區(qū)選擇器：

最近學(xué)習(xí)微信小程序，為了檢驗自己的學(xué)習(xí)效果，自己做一個小示例，網(wǎng)上搜索下類似的實例，發(fā)現(xiàn)這個更好，大家看下。

一、區(qū)域間手勢滑動切換，標題欄高亮隨之切換

思路是：拿當前的current來決定高亮樣式

1.監(jiān)聽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
      });
...
}

其他級別以其類推。

效果如下：

二、標題欄點擊切換，則區(qū)域間也隨著切換

changeCurrent: function (e) {
    // 記錄點擊的標題所在的區(qū)級級別
    var current = e.currentTarget.dataset.current;
    this.setData({
      current: current
    });
  }

標題欄<text>上綁定點擊事件

<text bindtap="changeCurrent" data-current="0">

效果如下：

數(shù)據(jù)綁定用起來果然是爽，寥寥幾句代碼完成了點擊切換，要是別的平臺的寫同樣的功能，這要寫半天。

三、回到前一級點擊某區(qū)域后，要自動將往后級的數(shù)組、index、name、array清空，否則邏輯錯亂了。

例如，依次選擇了北京-朝陽區(qū)-三環(huán)以內(nèi)之后，又回到了省級選擇了浙江省，此時二級三級區(qū)域都還是原先所選的朝陽區(qū)-三環(huán)以內(nèi)，左右滑動區(qū)域內(nèi)容也顯示的是錯的。

為了解決這個bug，需要再次處理tapped點擊事件，將子級的選擇清空。

provinceTapped: function(e) {
    // 標識當前點擊省份，記錄其名稱與主鍵id都依賴它
    var index = e.currentTarget.dataset.index;
    // current為1，使得頁面向左滑動一頁至市級列表
    // provinceIndex是市區(qū)數(shù)據(jù)的標識
    this.setData({
      current: 2,
      cityIndex: index,
      regionIndex: -1,
      townIndex: -1,
      cityName: this.data.city[index],
      regionName: '',
      townName: '',
    region: [],
    town: []
    });
...

}

效果如下：

四、修正一初始化即提供4個swiper-item的bug

處理方式是加一個數(shù)組的元素個數(shù)是否為零，例如城市當它有值才顯現(xiàn)

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

相應(yīng)地在js文件中生成它

  this.setData({
-      current: 2,
       cityIndex: index,
       regionIndex: -1,
       townIndex: -1,
            this.setData({
         region: array,
         regionObjects: area
       });
+      // 確保生成了數(shù)組數(shù)據(jù)再移動swiper
+      that.setData({
+        current: 2
+      });
     });

注意這里是將current的setData操作移到region與regionObject之下了，保證了先有值再控制swiper的位移。

最后上一個與原生picker寫的對比gif圖：