关于微信小程序的省市区三级联动的案例

先上一张效果图:

这里是.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>
< !–要显示的省-市-区–>




< 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");//导入citys.js文件
/**

• 页面的初始数据
• provinces:所有省份
• citys选择省对应的所有市,
• areas选择市对应的所有区
• provinces：当前被选中的省
• city当前被选中的市
• areas当前被选中的区
  */
  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;//选择地址的时候,获取value[0,0,0]里面的值,分别代表省市区的坐标
  //console.log(“val的值:”+val);
  var t = this.data.values; //t的值是为了来跟上一次记录的val的来对比的,方便下面判断不一样的情况下执行的操作
  //console.log(":t的值:"+t);
  var cityData = this.data.cityData;
  //console.log(“cityData的值citys:” + this.data.cityData[val[0]].sub[0].name);
  //console.log(“cityData的值countys:” + this.data.cityData[val[0]].sub[0].sub[1].name);

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)//同理,val[0]是省,sub[0]是市,sub[0]是区,可以对照着citys.js文件里面的格式来理解
  }


  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('初始化完成');

}
})

这里是utils.utils.js的代码:(这里只复制了其中一小段,可以去网上搜最全的代码去看,切记最后那两段代码不能忘记写,在这里遇到过坑,要定义才能使用)
var cityData = [{
“name”: “北京”,
“code”: “110000”,
“sub”: [{
“name”: “北京市”,
“code”: “110000”,
“sub”: [{
“name”: “东城区”,
“code”: “110101”
},
{
“name”: “西城区”,
“code”: “110102”
},
{
“name”: “朝阳区”,
“code”: “110105”
},
{
“name”: “丰台区”,
“code”: “110106”
},
{
“name”: “石景山区”,
“code”: “110107”
},
{
“name”: “海淀区”,
“code”: “110108”
},
{
“name”: “门头沟区”,
“code”: “110109”
},
{
“name”: “房山区”,
“code”: “110111”
},
{
“name”: “通州区”,
“code”: “110112”
},
{
“name”: “顺义区”,
“code”: “110113”
},
{
“name”: “昌平区”,
“code”: “110114”
},
{
“name”: “大兴区”,
“code”: “110115”
},
{
“name”: “怀柔区”,
“code”: “110116”
},
{
“name”: “平谷区”,
“code”: “110117”
},
{
“name”: “密云县”,
“code”: “110228”
},
{
“name”: “延庆县”,
“code”: “110229”
}
]
}]
},
function init(that) {
that.setData({
‘cityData’: cityData
});
}
module.exports = {
init: init
}