微信小程序 实现三级联动

微信小程序 实现三级联动

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}}" 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 = llId;var that = this;var date = new Date()console.FullYear() + "年" + (Month() + 1) + "月" + Date() + "日");//获取省市区县数据AreaInfo(function (arr) {areaInfo = arr;//获取省份数据getProvinceData(that);});},// ------------------- 分割线 --------------------onReady: function () {this.animation = wx.createAnimation({transformOrigin: "50% 50%",duration: 0,timingFunction: "ease",delay: 0})anslateY(200 + 'vh').step();this.setData({animation: port(),show: show})},//移动按钮点击事件translate: function (e) {if (t == 0) {moveY = 0;show = false;t = 1;} else {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.},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})anslateY(moveY + 'vh').step()that.setData({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.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;
}

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

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

转载于:.html