微信小程序实现省市区三级联动

最新推荐文章于 2025-01-21 09:32:33 发布

原创

最新推荐文章于 2025-01-21 09:32:33 发布 · 8.2k 阅读

33 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #javascript

本文档详细介绍了如何使用微信小程序的picker组件，通过mode='multiSelector'实现自定义的省市区三级联动选择器。通过绑定事件和数据绑定，结合后台返回的数据动态更新选择器内容，实现灵活的数据交互。同时，文章还提供了具体的WXML和JS代码示例，帮助开发者理解并应用到实际项目中。

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

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>

Page({
   
   
  data: {
   
   
    region: [],// 选中的数据
  },
  //点击确定按钮
  bindRegionChange: function (e) {
   
   
    console.log(e.detail.value)
    console.log(e.detail.code)
    this.setData({
   
   
      region: e.detail.value
    })
  }
})