微信⼩程序实现三级联动-省市区
github项⽬地址周末情侣
序：项⽬中需要⽤到三级联动，⾃⼰试着写了下，也查了⼀些资料，现在把这个记录⼀下，⾥⾯地区数据，可根据个⼈需要做⼀些更改，我⽐较懒就不改了。
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}}" 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 = fal;
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
//判断滑动的是第⼏个column
//若省份column做了滑动则定位到地级市和区县第⼀位
if (index[0] != val[0]) {
val[1] = 0;
val[2] = 0;
getCityArr(val[0], this);//获取地级市数据
getCountyInfo(val[0], val[1], this);//获取区县数据
} el { //若省份column未做滑动，地级市做了滑动则定位区县第⼀位
if (index[1] != val[1]) {
val[2] = 0;
getCountyInfo(val[0], val[1], this);//获取区县数据
}
}
index = val;
console.log(index + " => " + val);
//更新数据
this.tData({
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 = llId;
var that = this;
var date = new Date()
console.FullYear() + "年" + (Month() + 1) + "⽉" + Date() + "⽇"); //获取省市区县数据
areaInfo = arr;
//获取省份数据
getProvinceData(that);
});
},
// ------------------- 分割线 --------------------
onReady: function () {
this.animation = wx.createAnimation({
transformOrigin: "50% 50%",
duration: 0,
timingFunction: "ea",
delay: 0
}
)
anslateY(200 + 'vh').step();
this.tData({
animation: port(),
show: show
})
},
//移动按钮点击事件
translate: function (e) {
if (t == 0) {
moveY = 0;
show = fal;
t = 1;
} el {
moveY = 200;
show = true;
t = 0;
}
// anslate(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.
},
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: "ea",
数的认识delay: 0
}
)
anslateY(moveY + 'vh').step()
that.tData({
animation: port(),
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.tData({
provinces: provinces
})
//初始化调⼀次可更改
getCityArr(0, that);
getCountyInfo(0, 0, that);
that.tData({
黄鹤一去不复返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.tData({
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++) {
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.tData({
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;
text-align: center;
line-height: 50rpx;
font-size: 34rpx;
font-family: Arial, Helvetica, sans-rif;
}
.left-bt{
left: 30rpx;
}
.right-bt {
right: 30rpx;
}
.line{
display: block;
position: fixed;
height: 1rpx;
width: 100%;
margin-top: 89rpx;
background-color: #eeeeee;
}
这个是没有进⾏封装的处理
项⽬⾥已经封装好，可直接通过模板调⽤使⽤。
