微信小程序地区选择，单级学校选择和省，市，区选择

为了高校小程序设计大赛，刚刚接触小程序没多久，遇到了好多问题，解决之后想把解决办法分享给他人，同时也是记录自己的学习过程。为了这个地区选择走了好多弯路，一开始要什么腾讯地图授权，但又没有备案了的域名，最后终于找到了这个，话不多说，直接上代码了。

wxml代码

<view class="tui-picker-content">
<view class="tui-picker-name">请选择学校</view>
<picker bindchange="changeCountry" value="{{countryIndex}}" range="{{countryList}}">
  <view class="tui-picker-detail">{{countryList[countryIndex]}}</view>
 </picker>
</view>

<view class="tui-picker-content">
 <view class="tui-picker-name">请选择地区</view>
<picker bindchange="changeRegin" mode = "region" value="{{region}}">
 <view class="tui-picker-detail">{{region[0]}} - {{region[1]}} - {{region[2]}}</view>
 </picker>
</view>

js代码

	Page({
  data: {
  //单级选择学校
    countryList: ['河北金融学院', '保定学院', '河北农业大学', '河北科技大学', '河北地质大学', '中央						司法警官学院', '河北大学'],
    countryIndex: 6,
    //默认省市区
    region: ["河北省", "保定市", "莲池区"],
  },
  // 单级选择函数
  changeCountry(e) {
    this.setData({ countryIndex: e.detail.value });
  },
  // 选择省市区函数
  changeRegin(e) {
    this.setData({ region: e.detail.value });
  }
})

wxss代码

page{background-color: #efeff4;}
.tui-picker-content{
  padding: 30rpx;
  text-align: center;
}
.tui-picker-name{
  height: 80rpx;
  line-height: 80rpx;
}
.tui-picker-detail{
  height: 80rpx;
  line-height: 80rpx;
  background-color: #fff;
  font-size: 35rpx;
  padding: 0 10px;
  overflow: hidden;
}

ps:不知道是找的那位大哥的代码了，如有冒犯，请联系删除。