微信小程式 省市區選擇器實例詳解

微信小程式 省市區選擇器：

      最近學習微信小程序，為了檢驗自己的學習效果，自己做一個小示例，網上搜索下類似的實例，發現這個更好，大家看下。

一、區域間手勢滑動切換，標題列高亮隨之切換

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

1.監聽swiper滾動到的位置：

<swiper class="swiper-area" current="{{current}}" bindchange="currentChanged">
 
currentChanged: function (e) {
  // swiper滚动使得current值被动变化，用于高亮标记
    var current = e.detail.current;
    this.setData({
      current: current
    });
  }

   

.佈局檔中做條件判斷，是否加上高亮樣式，其中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
      });
...
}

其他等級以其類推。

效果如下：

二、標題列點擊切換，則區域間也隨著切換

changeCurrent: function (e) {
    // 记录点击的标题所在的区级级别
    var current = e.currentTarget.dataset.current;
    this.setData({
      current: current
    });
  }

標題列上綁定點擊事件

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

標題列上綁定點擊事件

reee

資料綁定用起來果然是爽，寥寥幾句程式碼完成了點擊切換，要是別的平台的寫同樣的功能，這要寫半天。

三、回到前一級點擊某區域後，要自動將往後級的陣列、index、name、array清空，否則邏輯錯亂了。

例如，依序選擇了北京-朝陽區-三環以內之後，又回到了省級選擇了浙江省，此時二級三級區域都還是原先所選的朝陽區-三環以內，左右滑動區域內容也顯示的是錯的。

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

provinceTapped: function(e) {
    // 标识当前点击省份，记录其名称与主键id都依赖它
    var index = e.currentTarget.dataset.index;
    // current为1，使得页面向左滑动一页至市级列表
    // provinceIndex是市区数据的标识
    this.setData({
      current: 2,
      cityIndex: index,
      regionIndex: -1,
      townIndex: -1,
      cityName: this.data.city[index],
      regionName: '',
      townName: '',
    region: [],
    town: []
    });
...
 
}

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

處理方式是加一個陣列的元素個數是否為零，例如城市當它有值才顯現

相應地在js檔案中產生它

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

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

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

不用在picker上反覆點擊反覆選擇，也不會出現跨級點擊的問題，體驗上是不是有好一點呢？

感謝閱讀，希望能幫助大家，謝謝大家對本站的支持！

更多微信小程式 省市區選擇器實例詳解相關文章請關注PHP中文網！