微信小程序三级联动自定义组件component

该功能主要利用微信小程序的组件功能和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的属性使用）