- 关于省市区的关系，可以考虑写在数据库表中，也可以直接写在js中，这里采用后者使用city.js
- 需要了解一下关于小程序中的animation和picker-view，以及picker-view-column
- 下面直接来看一下代码
- wxml部分
<button bindtap="selectDistrict" style='margin: 0'>请选择省市区地址</button>
<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-view style="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>
.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;
}
var address = require('../../lib/city.js');
/**
* 页面的初始数据
* provinces:所有省份
* citys选择省对应的所有市,
* areas选择市对应的所有区
* provinces：当前被选中的省
* city当前被选中的市
* areas当前被选中的区
*/
data: {
animationAddressMenu: {},
addressMenuIsShow: false,
value: [0, 0, 0],
provinces: [],
citys: [],
areas: [],
province: '',
city: '',
area: ''
},
onLoad: function (options) {
// 初始化动画变量
var animation = wx.createAnimation({
duration: 500,
transformOrigin: "50% 50%",
timingFunction: 'ease',
})
this.animation = animation;
// 默认联动显示浙江省
var id = address.provinces[10].id
this.setData({
provinces: address.provinces,
citys: address.citys[id],
areas: address.areas[address.citys[id][0].id],
})
// 巨坑 10表示选中浙江省
this.setData({
value: [10, 0, 0]
})
},
// 点击所在地区弹出选择框
selectDistrict: function (e) {
var that = this
if (that.data.addressMenuIsShow) {
return
}
that.startAddressAnimation(true)
},
// 执行动画
startAddressAnimation: function (isShow) {
var that = this
if (isShow) {
that.animation.translateY(0 + 'vh').step()
} else {
that.animation.translateY(40 + 'vh').step()
}
console.log(that.animation.export())
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
var province = that.data.provinces[value[0]].name;
var city = that.data.citys[value[1]].name;
var area = that.data.areas[value[2]].name;
that.setData({
areaInfo: areaInfo,
province: province,
city: city,
area: area
})
},
// 处理省市县联动逻辑
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)
},