github项目地址 https://github.com/z1511676208/chooseAddr
序：项目中需要用到三级联动，自己试着写了下，也查了一些资料，现在把这个记录一下，里面地区数据，可根据个人需要做一些更改，我比较懒就不改了。
wxml
<!--index.wxml-->
<view class="infoText">{{province}} {{city}} {{county}}</view>
<view class="aaaa" >
<button class="animation-button" bindtap="translate">选择城市</button>
</view>
<view class="animation-element-wrapper" animation="{{animation}}" style="visibility:{{show ? 'visible':'hidden'}}" bindtap="hiddenFloatView" data-id="444">
<view class="animation-element" catchtap="nono">
<text class="left-bt" catchtap="hiddenFloatView" data-id="555">取消</text>
<text class="right-bt" catchtap="hiddenFloatView" data-id="666">确定</text>
<view class="line"></view>
<picker-view indicator-style = "height: 50rpx;" value="{{value}}" bindchange="bindChange" catchtap="nono">
<!--省-->
<picker-view-column>
<view wx:for="{{provinces}}" wx:for-item="sheng" wx:key="">
{{sheng.name}}
</view>
</picker-view-column>
<!--地级市-->
<picker-view-column>
<view wx:for="{{citys}}" wx:key="">
{{item.name}}
</view>
</picker-view-column>
<!--区县-->
<picker-view-column>
<view wx:for="{{countys}}" wx:key="">
{{item.name}}
</view>
</picker-view-column>
</picker-view>
</view>
</view>
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;
}
这个是没有进行封装的处理
项目里已经封装好，可直接通过模板调用使用。
