序：项目中需要用到三级联动，自己试着写了下，也查了一些资料，现在把这个记录一下，里面地区数据，可根据个人需要做一些更改，我比较懒就不改了。

wxml

{{province}} {{city}} {{county}}

选择城市

取消

确定

{{sheng.name}}

{{item.name}}

{{item.name}}

js

//index.js

//获取应用实例

// var app = getApp()

// var util = require('../../utils/util.js')

var area = require('../../utils/area.js')

var areaInfo = [];//所有省市区县数据

var provinces = [];//省

var citys = [];//城市

var countys = [];//区县

var index = [0, 0, 0];

var cellId;

var t = 0;

var show = false;

var moveY = 200;

Page({

data: {

show: show,

provinces: provinces,

citys: citys,

countys: countys,

value: [0, 0, 0]

},

//滑动事件

bindChange: function (e) {

var val = e.detail.value

// console.log(e)

//判断滑动的是第几个column

//若省份column做了滑动则定位到地级市和区县第一位

if (index[0] != val[0]) {

val[1] = 0;

val[2] = 0;

getCityArr(val[0], this);//获取地级市数据

getCountyInfo(val[0], val[1], this);//获取区县数据

} else { //若省份column未做滑动，地级市做了滑动则定位区县第一位

if (index[1] != val[1]) {

val[2] = 0;

getCountyInfo(val[0], val[1], this);//获取区县数据

}

}

index = val;

console.log(index + " => " + val);

//更新数据

this.setData({

value: [val[0], val[1], val[2]],

province: provinces[val[0]].name,

city: citys[val[1]].name,

county: countys[val[2]].name

})

},

onLoad: function (options) {

cellId = options.cellId;

var that = this;

var date = new Date()

console.log(date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日");

//获取省市区县数据

area.getAreaInfo(function (arr) {

areaInfo = arr;

//获取省份数据

getProvinceData(that);

});

},

// ------------------- 分割线 --------------------

onReady: function () {

this.animation = wx.createAnimation({

transformOrigin: "50% 50%",

duration: 0,

timingFunction: "ease",

delay: 0

}

)

this.animation.translateY(200 + 'vh').step();

this.setData({

animation: this.animation.export(),

show: show

})

},

//移动按钮点击事件

translate: function (e) {

if (t == 0) {

moveY = 0;

show = false;

t = 1;

} else {

moveY = 200;

show = true;

t = 0;

}

// this.animation.translate(arr[0], arr[1]).step();

animationEvents(this,moveY, show);

},

//隐藏弹窗浮层

hiddenFloatView(e){

console.log(e);

moveY = 200;

show = true;

t = 0;

animationEvents(this,moveY, show);

},

//页面滑至底部事件

onReachBottom: function () {

// Do something when page reach bottom.

},

tiaozhuan(){

wx.navigateTo({

url: '../../pages/modelTest/modelTest',

})

}

})

//动画事件

function animationEvents(that,moveY,show){

console.log("moveY:" + moveY + "\nshow:" + show);

that.animation = wx.createAnimation({

transformOrigin: "50% 50%",

duration: 400,

timingFunction: "ease",

delay: 0

}

)

that.animation.translateY(moveY + 'vh').step()

that.setData({

animation: that.animation.export(),

show: show

})

}

// ---------------- 分割线 ----------------

//获取省份数据

function getProvinceData(that) {

var s;

provinces = [];

var num = 0;

for (var i = 0; i < areaInfo.length; i++) {

s = areaInfo[i];

if (s.di == "00" && s.xian == "00") {

provinces[num] = s;

num++;

}

}

that.setData({

provinces: provinces

})

//初始化调一次可更改

getCityArr(0, that);

getCountyInfo(0, 0, that);

that.setData({

province: "北京市",

city: "市辖区",

county: "东城区",

})

}

// 获取地级市数据

function getCityArr(count, that) {

var c;

citys = [];

var num = 0;

for (var i = 0; i < areaInfo.length; i++) {

c = areaInfo[i];

if (c.xian == "00" && c.sheng == provinces[count].sheng && c.di != "00") {

citys[num] = c;

num++;

}

}

if (citys.length == 0) {

citys[0] = { name: '' };

}

that.setData({

city: "",

citys: citys,

value: [count, 0, 0]

})

}

// 获取区县数据

function getCountyInfo(column0, column1, that) {

var c;

countys = [];

var num = 0;

for (var i = 0; i < areaInfo.length; i++) {

c = areaInfo[i];

if (c.xian != "00" && c.sheng == provinces[column0].sheng && c.di == citys[column1].di) {

countys[num] = c;

num++;

}

}

if(countys.length == 0){

countys[0] = {name:''};

}

that.setData({

county: "",

countys: countys,

value: [column0, column1, 0]

})

}

wxss

/**index.wxss**/

page{

background-color: rgba(255, 255, 255, 1);

}

.infoText{

margin-top: 20rpx;

text-align: center;

width: 100%;

justify-content: center;

}

picker-view{

background-color: white;

padding: 0;

width: 100%;

height: 380rpx;

bottom: 0;

position: fixed;

}

picker-view-column view{

vertical-align:middle;

font-size: 28rpx;

line-height: 28rpx;

height: 100%;

display: flex;

align-items: center;

justify-content: center;

}

/* ----------------------------------------- */

.animation-element-wrapper {

display: flex;

position: fixed;

left: 0;

top:0;

height: 100%;

width: 100%;

background-color: rgba(0, 0, 0, 0.6);

}

.animation-element {

display: flex;

position: fixed;

width: 100%;

height: 470rpx;

bottom: 0;

background-color: rgba(255, 255, 255, 1);

}

.animation-button {

margin-top: 20rpx;

top:20rpx;

width: 400rpx;

height: 100rpx;

line-height: 100rpx;

align-items:center;

}

text{

color: #999999;

display: inline-flex;

position: fixed;

margin-top: 20rpx;

height: 50rpx;

text-align: center;

line-height: 50rpx;

font-size: 34rpx;

font-family: Arial, Helvetica, sans-serif;

}

.left-bt{

left: 30rpx;

}

.right-bt {

right: 30rpx;

}

.line{

display: block;

position: fixed;

height: 1rpx;

width: 100%;

margin-top: 89rpx;

background-color: #eeeeee;

}

这个是没有进行封装的处理

项目里已经封装好，可直接通过模板调用使用。