小程序基于 picker 封装省市区三级联动组件_微信小程序封装省市区-CSDN博客

本文链接：https://blog.csdn.net/m0_49045925/article/details/123503818

本文详细介绍了如何在微信小程序中使用Vue编写一个自定义的picker-city-area组件，展示省市区联动，并在父组件中调用和传递区域选择信息。涉及WXML、WXSS和JS的交互代码及其实现原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

代码如下

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]})
    }
});