该功能主要利用微信小程序的组件功能和picker-view 组件
首先创建一个component组件
html
<view class="wrapper-picker" hidden="{ { pickerHidden }}">
<view class="mask"></view>
<view class="btn-group">
<view class="cancel" bindtap="cancelFn">取消</view>
<view class="confirm" bindtap="confirmFn">确定</view>
</view>
<picker-view class="picker-floor" indicator-style="height: 68rpx;" value="{ { value }}" bindchange="bindChange">
<picker-view-column>
<view wx:for="{ { data }}">{ { item.area_name }}</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{ { data[one].sub_area }}">{ { item.area_name }}</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{ { data[one].sub_area[two].sub_area }}">{ { item.area_name }}</view>
</picker-view-column>
</picker-view>
</view>
css
.wrapper-picker {
position: fixed;
z-index: 99999;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
}
.wrapper-picker .mask {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .6;
}
.picker-floor {
position: absolute;
z-index: 999999;
bottom: 0;
left: 0;
padding-left: 40rpx;
width: 100%;
height: 560rpx;
}
.picker-floor view {
line-height: 68rpx;
}
.wrapper-picker .btn-group {
position: absolute;
z-index: 999999;
bottom: 560rpx;
left: 0;
width: 100%;
height: 80rpx;
line-height: 80rpx;
}
.wrapper-picker .cancel {
float: left;
margin-left: 20rpx;
}
.wrapper-picker .confirm {
float: right;
margin-right: 20rpx;
color: #5fbf55;
}
js
const app = getApp(),
gdata = app.globalData; //引入数据
Component({
/**
* 组件的属性列表
*/
properties: {
pickerHidden: { //控制组件显示
type: Boolean,
value: false
}
},
/**
* 组件的初始数据
*/
data: {
data: [],
one: 0,
two: 0,
three: 0,
arr: [0, 0, 0],
indexArr: []
},
/**
* 组件生命周期函数，在组件实例进入页面节点树时执行
*/
attached: function () {
this.setData({
data: gdata.array
})
},
/**
* 组件的方法列表
*/
methods: {
bindChange: function (e) {
console.log(this.data.arr, '改变前');
console.log(e.detail.value, '改变后');
let one = e.detail.value[0],
two = e.detail.value[1],
three = e.detail.value[2];
this.setData({
arr: e.detail.value,
one: one,
two: two,
three: three,
indexArr: this.data.indexArr
})
//通过索引实现联动
try {
this.data.indexArr[0] = this.data.data[this.data.one].sub_area[this.data.two].sub_area[this.data.three].area_name; //市 字段名可自己根据地址数据的字段名自行更改
this.data.indexArr[1] = this.data.data[this.data.one].sub_area[this.data.two].sub_area[this.data.three].display_text.split('·').join('-'); //区
this.data.indexArr[2] = this.data.data[this.data.one].sub_area[this.data.two].sub_area[this.data.three].area_id;
} catch (e) {
console.log('出现溢出'); // 上一个选中的省中市的数量溢出当前省的市数量
}
},
//绑定自定义的调用方法
//取消操作
cancelFn: function () {
this.triggerEvent('cancelFn'); //绑定组件触发
},
//确定操作
confirmFn: function () {
let myEventDetail = null;
//此处传值 可将myEventDetail 传给父组件
this.triggerEvent('myevent', myEventDetail); //绑定组件触发
}
}
})
至此组件创建完毕 需要的地方直接引入后调用即可
调用时先在json中声明
{
"usingComponents": {
"my-picker": "/component/pickerFloor/pickerFloor" //路径
}
}
html
<my-picker picker-hidden="{ { isHidden }}" bindmyevent="onMyEvent" bindcancelFn="onMyEventCancel" /> //引用组件 绑定方法 bindmyevent（myevent为组件中声明的方法 使用triggerEvent绑定） picker-hidden（组件的属性传入父组件中 控制显示）
控制isHidden 就可以做到该地址组件的显示隐藏
js
//取消操作
onMyEventCancel: function (e) {
this.setData({
isHidden: true
})
},
//确认操作
onMyEvent: function (e) {
console.log(e); //组件中传过来的值
}
个人感觉：组件的使用主要理解triggerEvent 绑定 和 父组件调用相应的事件关系 同时子组件属性传入父组件使用的方式 （上面列子中picker-hidden的属性使用）