微信小程序组件简易实现省市区三级联动_微信小程序实现地区级联-CSDN博客

本文链接：https://blog.csdn.net/SoulNone/article/details/126317657

直接使用微信官方文档中的picker来开发省市区三级联动 picker

运行效果图

在这里插入图片描述

模拟数据：选择确定地址后回填效果
在这里插入图片描述

vue 代码

wxml 部分

<view>
  <picker mode="region" bindchange="bindRegionChange" value="{{region}}">
    <text wx:if="{{region==''}}">请选择省市区</text>
    <text wx:if="{{region!=''}}">{{region[0]}}、{{region[1]}}、{{region[2]}}</text>
  </picker>
</view>

js 部分

Page({
  data: {
    region: [], // 选中的数据
  },

  onLoad: function (options) {
    //模拟数据：选择确定地址后回填效果。数据str 可以从后台中获取
    var str = "北京市,北京市,海淀区";
    var splitAdd = str.split(",");
    console.log(splitAdd)
    this.setData({
      region: splitAdd
    })
  },
  //点击确定按钮
  bindRegionChange: function (e) {
    console.log(e.detail.value)
    console.log(e.detail.code)
    this.setData({
      region: e.detail.value
    })
  }
})