效果图
代码如下
a.子组件中
- wxml 中
<view class="picker-city-area-content">
<picker bindchange="changeRegin" mode = "region" value="{
{region}}">
<view class="picker-city-area-detail">{
{region[0]}} - {
{region[1]}} - {
{region[2]}}</view>
</picker>
</view>
- wxss
page{
background-color: #efeff4;
}
.picker-city-area-content{
text-align: center;
}
.picker-city-area-detail{
height: 80rpx;
line-height: 80rpx;
background-color: #fff;
font-size: 35rpx;
padding: 0 10px;
overflow: hidden;
}
- js 中
Component({
/**
* 组件的属性列表
*/
properties: {
region: {
type: Array,
value: []
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
// 选择省市区函数
changeRegin(e){
const {
code, value } = e.detail
this.setData({
region: value });
this.triggerEvent('handleChangeCityAreaInfo', {
areaInfo: [
{
provinceCode: code[0], provinceName: value[0] },
{
cityCode: code[1], cityName: value[1] },
{
areaCode: code[2], areaName: value[2] }
]
})
}
}
})
b. 父组件中使用
- wxml 中
<view class="box">
<picker-city-area region="{
{region}}" bind:handleChangeCityAreaInfo="handleChangeCityAreaInfo"></picker-city-area>
</view>
- wxss 中
.box{
padding: 20px 15px;}
- json 中
{
"navigationBarTitleText": "省市区联动",
"usingComponents": {
"picker-city-area": "/components/picker-city-area/picker-city-area",
"my-date-picker": "/components/my-date-picker/index"
}
}
- js 中
Page({
data: {
region: ["湖北省", "武汉市", "洪山区"],
valueList: [9999,0,0]
},
handleChangeCityAreaInfo: function(e) {
console.log(e.detail.areaInfo)
},
handleSelectDate(e){
console.log(e.detail);
},
// 页面初始化事件
onLoad: function () {
},
onShow: function () {
const date = new Date()
this.setData({
valueList: [9999,date.getMonth(),date.getDate() -1]})
}
});