小程序问题日记二（选择区域的三级联动）

最新推荐文章于 2025-06-22 21:21:52 发布

原创最新推荐文章于 2025-06-22 21:21:52 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序三级联动 #小程序原生三级联动

小程序问题日记专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种在微信小程序中实现地区选择的方法，利用自带的mode=region属性，可以轻松地让用户挑选所在省份、城市及区县。该组件不支持港澳台地区的选择。

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

最简单的办法；使用小程序自带有mode="region" 调用微信原生代码。

注意：没有港澳台区域选择。

预览效果

页面代码

<picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
   <view class="picker">
      {{region[0]}}，{{region[1]}}，{{region[2]}}
   </view>
</picker>js页面

初始值
region: ['广东省', '广州市', '海珠区'],
customItem: '全部',
绑定方法
bindRegionChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      region: e.detail.value
    })
  },