小程序选择省市区-（同级）

在github下载地图json文件，这里我把json改成js

var china = [{
    "name": "北京市"
    .....
}]
module.exports = china

同一个文件夹下面的
首先是wxml

<!-- 蒙版 -->
<view class="region-bg" class="{{regionShow === true ? '' : 'region-none'}}">
  <!-- 装省市区的盒子 -->
  <view class="region">
    <!-- 省遍历 -->
    <view class="region-common province">
      <text class="{{provinceIndex == index ? 'pro-h' : '' }}" wx:for="{{proData}}" wx:key="{{index}}" bindtap="mapTap" data-num="{{index}}" data-name="{{item.name}}" data-type="province">{{item.name}}</text>
    </view>
    <!-- 市遍历 -->
    <view class="region-common city">
      <text class="{{cityIndex == index ? 'city-h' : '' }}" wx:for="{{cityData}}" bindtap="mapTap" data-num="{{index}}" data-name="{{item.name}}" data-type="city">{{item.name}}</text>
    </view>
    <!-- 地区遍历 -->
    <view class="region-common area">
      <text wx:for="{{areaData}}" bindtap="mapTap" data-num="{{index}}" data-name="{{item}}" data-type="area">{{item}}</text>
    </view>
  </view>
</view>

wxss文件

.region-bg {
  position: absolute;
  width: 100%;
  height: 95%;
  background: rgba(0, 0, 0, 0.1);
}
.region-none {
  display: none;
}

.region {
  width: 100%;
  height: 400px;
  overflow-y: auto;
  position: absolute;
}
.region-common {
  height: 100%;
  position: absolute;
  overflow-y: auto;
}
.province {
  width: 33%;
  background: #aaa;
  left: 0;
}

.city {
  width: 33%;
  background: #bbb;
  left: 33%;
}

.area {
  width: 34%;
  background: #ccc;
  left: 66%;
}

.province text ,.city text ,.area text {
  display: block;
  width: 100%;
  text-align: center;
}
.pro-h,.city-h {
  background-color: greenyellow;
}

js文件

// pages/test/test.js
// 引入地图
var china = require("./data.js")
Page({
  /**
   * 页面的初始数据
   */
  data: {
    regionShow: true,
    proData: china,
    provinceIndex: 0,
    cityIndex: 0,
    areaData: [],
    cityData: []
  },
  mapTap (e) {
    var type = e.currentTarget.dataset.type
    var name = e.currentTarget.dataset.name
    var idx = e.currentTarget.dataset.num
    console.log(type,name,idx)
    console.log(china[idx].city[0].area)
    if (type === 'province') {
      this.setData({
        cityData: china[idx].city,
        areaData: china[idx].city[0].area,
        provinceIndex: idx
      })
    } else if (type === 'city') {
      var proIdx = this.data.provinceIndex
      this.setData({
        areaData: china[proIdx].city[idx].area,
        cityIndex: idx
      })
    } else {
      this.setData({
        regionShow: false
      })
      console.log('name',name)
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      cityData: china[0].city,
      areaData: china[0].city[0].area
    })
    console.log(china)
  }
})