微信小程序三级联动（数据在我的资源里）

在js中

//index.js

//获取应用实例

const app = getApp()

var address=require('../../../utils/regions.js')

Page({

data: {

animationAddressMenu: {},

addressMenuIsShow: false,

value: [0, 0,0],

provinces: [],

citys: [],

areas: [],

areaInfo: '请选择 >'

},

//事件处理函数

bindViewTap: function() {

wx.navigateTo({

url: '../logs/logs'

})

},

onLoad: function () {

var id = address.provinces[0].id

this.setData({

provinces: address.provinces,

citys: address.citys[id],

areas: address.areas[address.citys[id][0].id],

})

},

pickTab: function(e){

var that =this

if (that.data.addressMenuIsShow) {

return

}

that.startAddressAnimation(true)

},

// 点击所在地区弹出选择框

selectDistrict: function (e) {

var that = this

// 如果已经显示，不在执行显示动画

if (that.data.addressMenuIsShow) {

return

}

// 执行显示动画

that.startAddressAnimation(true)

},

// 执行动画

startAddressAnimation: function (isShow) {

console.log(isShow)

var that = this

// if (isShow) {

// // vh是用来表示尺寸的单位，高度全屏是100vh

// that.animation.translateY(0 + 'vh').step()

// } else {

// that.animation.translateY(40 + 'vh').step()

// }

that.setData({

// animationAddressMenu: that.animation.export(),

addressMenuIsShow: isShow,

})

},

// 点击地区选择取消按钮

cityCancel: function (e) {

this.startAddressAnimation(false)

},

// 点击地区选择确定按钮

citySure: function (e) {

var that = this

// var city = that.data.city

var value = that.data.value

that.startAddressAnimation(false)

// 将选择的城市信息显示到输入框

var areaInfo = that.data.provinces[value[0]].name +',' + that.data.citys[value[1]].name +',' + that.data.areas[value[2]].name

that.setData({

areaInfo: areaInfo,

})

},

// 点击蒙版时取消组件的显示

hideCitySelected: function (e) {

console.log(e)

this.startAddressAnimation(false)

},

// 处理省市县联动逻辑

cityChange: function (e) {

console.log(e)

var value = e.detail.value

var provinces = this.data.provinces

var citys = this.data.citys

var areas = this.data.areas

var provinceNum = value[0]

var cityNum = value[1]

var countyNum = value[2]

// 如果省份选择项和之前不一样，表示滑动了省份，此时市默认是省的第一组数据，

if (this.data.value[0] != provinceNum) {

var id = provinces[provinceNum].id

this.setData({

value: [provinceNum, 0, 0],

citys: address.citys[id],

areas: address.areas[address.citys[id][0].id],

})

} else if (this.data.value[1] != cityNum) {

// 滑动选择了第二项数据，即市，此时区显示省市对应的第一组数据

var id = citys[cityNum].id

this.setData({

value: [provinceNum, cityNum, 0],

areas: address.areas[citys[cityNum].id],

})

} else {

// 滑动选择了区

this.setData({

value: [provinceNum, cityNum, countyNum]

})

}

console.log(this.data)

},

})

wxml

<view class="pick" bindtap='selectDistrict'>{{ areaInfo}}</view>

<view class="picker-view" animation="{{animationAddressMenu}}" style="visibility:{{addressMenuIsShow ? 'visible':'hidden'}}">

<view style="height:10% ;width:95%;margin-top:10rpx">

<text catchtap="cityCancel">取消</text>

<text style="float: right" catchtap="citySure">确定</text>

</view>

<picker-viewstyle="width: 100%; height: 300px;"bindchange="cityChange"value="{{value}}"wx:key="">

<picker-view-column>

<view wx:for="{{provinces}}" class="picker-item">

{{item.name}}</view>

</picker-view-column>

<picker-view-column>

<view wx:for="{{citys}}" class="picker-item" wx:key="">

{{item.name}}

</view>

</picker-view-column>

<picker-view-column>

<view wx:for="{{areas}}" class="picker-item" wx:key="">

{{item.name}}</view>

</picker-view-column>

</picker-view>

</view>

xcss

.picker-view {

width: 100%;

display: flex;

z-index:12;

background-color: #fff;

flex-direction: column;

justify-content: center;

align-items: center;

position: fixed;

bottom: 0rpx;

left: 0rpx;

height: 40vh;

}

.picker-item {

line-height: 70rpx;

margin-left: 5rpx;

margin-right: 5rpx;

text-align: center;

}

json数据附带文件

自己写到util包 js文件并moudle.export曝光他