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

微信小程序省市区三级联动用的还是比较多的，以下是相关代码，还是先上效果图吧

结构部分

wxml结构

<view class="ship_list">
      <view class='ship_name'><text>联系人</text><input class='ship_focus' placeholder="姓名" auto-focus/></view>
       <view class='ship_name'><text>手机号</text><input class='ship_focus' placeholder="请输入手机号" auto-focus/></view>
       <view class='ship_area'>
            <text>选择地区</text>
            <!--要显示的省-市-区-->
            <input class='ship_citychoose' placeholder="选择" value="{{province}}-{{city}}-{{county}}" focus="{{focus}}" bindfocus="open" /><!--要显示的省-市-区-->
       </view>
       <view class='buy_street'>
            <text>详细地址</text>
            <textarea class='buy_streetnumber' placeholder='需要填写街道楼栋楼层或门牌号信息'></textarea>
       </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>

wxss结构

.ship_list{
  width: 100%;
  height: 360rpx;
  background: #fff;
}
.ship_list .ship_name{
  width: 100%;
  height: 80rpx;
  border-bottom: 2rpx solid #F1f3f2;
}
.ship_list .ship_name text{
  float: left;
  line-height: 80rpx;
  padding-left: 20rpx;
  font-size: 28rpx;
  color: #212121;
}
.ship_list .ship_name .ship_focus{
  line-height: 80rpx;
  padding-left: 70rpx;
  font-size: 28rpx;
  padding-top: 14rpx;
}
.ship_list .ship_area{
  width: 100%;
  height: 80rpx;
  border-bottom: 2rpx solid #F1f3f2;
}
.ship_list .ship_area text{
  float: left;
  line-height: 80rpx;
  padding-left: 20rpx;
  font-size: 28rpx;
  color: #212121;
}
.ship_list .ship_area .ship_citychoose{
  width: auto;
  font-size: 28rpx;
  line-height: 80rpx;
  color: #828282;
  padding-left: 40rpx;
  padding-top: 14rpx;
}
.ship_list .buy_street{
  width: 100%;
  height: 120rpx;
}
.ship_list .buy_street text{
  float: left;
  font-size: 28rpx;
  color: #212121;
  padding-left: 20rpx;
  padding-top: 10rpx;
}
.ship_list .buy_street .buy_streetnumber{
  width: 72%;
  height: 110rpx;
  margin-left: 170rpx;
  padding-top: 12rpx;
  font-size: 28rpx;
}


/*时间弹窗  */
.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;
}

 

JS结构

//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) {
    //console.log(e);
    var val = e.detail.value
    var t = this.data.values;
    var cityData = this.data.cityData;


    if (val[0] != t[0]) {
      console.log('province no ');
      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 no');
      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 no');
      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('city完成');
    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('初始化完成');
  }
})

 

最后的city.js一定要引入