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

结构部分

wxml结构

联系人 手机号 选择地区 详细地址 取消 确定 {{item}} {{item}} {{item}}

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一定要引入