微信小程序 三级联动省市区

github连接：https://github.com/UFO0001/wechat-three-level

//index.js//获取应用实例var tcity = require("../../utils/citys.js");var app = getApp()Page({  data: {    provinces: [],    province: "",    citys: [],    city: "",    countys: [],    county: '',    value: [0, 0, 0],    values: [0, 0, 0],    condition: false  },  bindChange: function(e) {    var val = e.detail.value    var t = this.data.values;    var cityData = this.data.cityData;        if(val[0] != t[0]){      console.log('province');      const citys = [];      const countys = [];      for (let i = 0 ; i < cityData[val[0]].sub.length; i++) {        citys.push(cityData[val[0]].sub[i].name)      }      for (let i = 0 ; i < cityData[val[0]].sub[0].sub.length; i++) {        countys.push(cityData[val[0]].sub[0].sub[i].name)      }      this.setData({        province: this.data.provinces[val[0]],        city: cityData[val[0]].sub[0].name,        citys:citys,        county: cityData[val[0]].sub[0].sub[0].name,        countys:countys,        values: val,        value:[val[0],0,0]      })            return;    }    if(val[1] != t[1]){      console.log('city');      const countys = [];      for (let i = 0 ; i < cityData[val[0]].sub[val[1]].sub.length; i++) {        countys.push(cityData[val[0]].sub[val[1]].sub[i].name)      }            this.setData({        city: this.data.citys[val[1]],        county: cityData[val[0]].sub[val[1]].sub[0].name,        countys:countys,        values: val,        value:[val[0],val[1],0]      })      return;    }    if(val[2] != t[2]){      console.log('county');      this.setData({        county: this.data.countys[val[2]],        values: val      })      return;    }  },  open:function(){    this.setData({      condition:!this.data.condition    })  },  onLoad: function () {    console.log("onLoad");    var that = this;        tcity.init(that);    var cityData = that.data.cityData;    const provinces = [];    const citys = [];    const countys = [];    for(let i=0;i<cityData.length;i++){      provinces.push(cityData[i].name);    }    console.log('省份完成');    for (let i = 0 ; i < cityData[0].sub.length; i++) {      citys.push(cityData[0].sub[i].name)    }    console.log('城市完成');    for (let i = 0 ; i < cityData[0].sub[0].sub.length; i++) {      countys.push(cityData[0].sub[0].sub[i].name)    }    that.setData({      'provinces': provinces,      'citys':citys,      'countys':countys,      'province':cityData[0].name,      'city':cityData[0].sub[0].name,      'county':cityData[0].sub[0].sub[0].name    })    console.log('初始化完成');  }})

<!--index.wxml--><view class="container">  <view class="input">    <input placeholder="选择地址" value="{{province}}-{{city}}-{{county}}" focus="{{focus}}" bindfocus="open" />  </view></view><view wx:if="{{condition}}" class="citypicker">  <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange" class="citybody">    <view class="cityheader">      <view bindtap="open" class="city-cancel">取消</view>      <view bindtap="open" class="city-true">确定</view>    </view>    <picker-view-column>      <view wx:for="{{provinces}}" wx:key="item" style="line-height: 50px;padding-left:10px;">{{item}}</view>    </picker-view-column>    <picker-view-column>      <view wx:for="{{citys}}" wx:key="item" style="line-height: 50px;padding-left:10px;">{{item}}</view>    </picker-view-column>    <picker-view-column>      <view wx:for="{{countys}}" wx:key="item" style="line-height: 50px;padding-left:10px;">{{item}}</view>    </picker-view-column>  </picker-view></view>

.input {  padding-top: 450rpx;  width: 100%;}.input input {  width: 100%;  background-color: #fff;  border-bottom: 1px #d9d9d9 solid;  border-top: 1px #d9d9d9 solid;  padding: 20rpx 50rpx;}.citypickers{  position: fixed;  height: 100%;  width: 100%;  min-height: 100%;  background-color: #ff0;}.citybody {  position: fixed;  bottom: 0px;}.cityheader {  position: absolute;  top:0px;  width: 100%;  z-index: 5;}.city-cancel {  float: left;  margin: 20rpx;  color: #828282;}.city-true {  float: right;  margin: 20rpx;  color: #10FF10;}.section .picker {  background-color: #fff;  border-bottom: 2px #cccccc solid;  border-top: 2px #d9d9d9 solid;  padding: 20rpx;}