小程序 省市两级pickerView
2019-10-29 本文已影响0人
devmao
使用
// 注意被点击的组件的slot与组件的slot相同
<addressPicker slotName="address" selectRegion="{{selectRegion}}" bind:getSelectedAddress="getSelectedAddress">
<view slot="address"></view>
</addressPicker>
源文件
js文件
// components/addressPicker/index.js
Component({
/**
* 启用插槽
*/
options: {
multipleSlots: true
},
/**
* 组件的属性列表
*/
properties: {
// 插槽名
slotName: {
type: String,
value: ''
},
// 选中的省市index
selectRegin:{
type:Array,
value: [0, 0]
},
},
/**
* 组件的初始数据
*/
data: {
regionList: [{
name: '山东省',
id: 1,
code: 201,
city: [{
name: '潍坊市',
id: 4,
code: 301
}, {
name: '济南市',
id: 5,
code: 302
}, {
name: '德州市',
id: 6,
code: 303
}]
}, {
name: '河北省',
id: 2,
code: 202,
city: [{
name: '保定市',
id: 4,
code: 301
}, {
name: '石家庄市',
id: 5,
code: 302
}, {
name: '雄安市',
id: 6,
code: 303
}]
}, {
name: '黑龙江省',
id: 3,
code: 203,
city: [{
name: '长春市',
id: 4,
code: 301
}, {
name: '哈尔滨市',
id: 5,
code: 302
}, {
name: '四平市',
id: 6,
code: 303
}]
}],
},
/**
* 组件的方法列表
*/
methods: {
/**
* 点击确定
*/
onRegionChange: function(e) {
console.log(e);
let regions = e.detail.value;
let province = this.data.regionList[regions[0]]
let data = {
selectRegin: regions,
province: province,
city: province.city[regions[1]].name
}
this.triggerEvent("getSelectedAddress", data)
},
/**
* 数据滚动
*/
bindcolumnchange: function(e) {
let column = e.detail.column;
let value = e.detail.value;
let selectRegion = this.data.selectRegin;
if (column == 0) {
selectRegion[0] = value;
selectRegion[1] = 0;
this.setData({
selectRegin: selectRegion,
})
}
},
},
})
wxml文件
<picker mode="multiSelector" bindchange="onRegionChange" value="{{selectRegin}}" range="{{[regionList, regionList[selectRegin[0]].city]}}" range-key='name' bindcolumnchange='bindcolumnchange'>
<slot name="{{slotName}}"></slot>
</picker>
其他文件均为空。