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

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

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

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

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

一、區(qū)域間手勢(shì)滑動(dòng)切換，標(biāo)題欄高亮隨之切換

思路是：拿當(dāng)前的current來(lái)決定高亮樣式

1.監(jiān)聽(tīng)swiper滾動(dòng)到的位置：

<swiper class="swiper-area" current="{{current}}" bindchange="currentChanged">

currentChanged: function (e) {
  // swiper滾動(dòng)使得current值被動(dòng)變化，用于高亮標(biāo)記
    var current = e.detail.current;
    this.setData({
      current: current
    });
  }

2.布局文件中做條件判斷，是否加上高亮樣式，其中area-selected是目標(biāo)樣式，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.點(diǎn)擊上級(jí)時(shí)為下一級(jí)賦予“請(qǐng)選擇”字樣

provinceTapped: function(e) {
...
      that.setData({
        cityName: '請(qǐng)選擇',
        city: array,
        cityObjects: area
      });
...
}

其他級(jí)別以其類(lèi)推。

效果如下：

二、標(biāo)題欄點(diǎn)擊切換，則區(qū)域間也隨著切換

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

標(biāo)題欄<text>上綁定點(diǎn)擊事件

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

效果如下：

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

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

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

為了解決這個(gè)bug，需要再次處理tapped點(diǎn)擊事件，將子級(jí)的選擇清空。

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

}

效果如下：

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

處理方式是加一個(gè)數(shù)組的元素個(gè)數(shù)是否為零，例如城市當(dāng)它有值才顯現(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ù)再移動(dòng)swiper
+      that.setData({
+        current: 2
+      });
     });

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

最后上一個(gè)與原生picker寫(xiě)的對(duì)比gif圖：