微信小程序 省市区选择器实例详解(附源码下载

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

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

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

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

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: []
    });
...

}

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

  this.setData({
-      current: 2,
       cityIndex: index,
       regionIndex: -1,
       townIndex: -1,
            this.setData({
         region: array,
         regionObjects: area
       });
+      // 确保生成了数组数据再移动swiper
+      that.setData({
+        current: 2
+      });
     });