小程序官方文档地区三联动选择

最新推荐文章于 2023-11-20 11:35:39 发布

原创最新推荐文章于 2023-11-20 11:35:39 发布 · 326 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序官方文档地区三联动选择

小程序专栏收录该内容

18 篇文章

订阅专栏

本文介绍小程序中如何使用picker组件实现省市区三级联动选择器，通过wxml和js代码示例，展示了picker地址选择器的强大功能，使用户能够轻松完成地址输入。

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

在小程序没有更新中国picke组件的时候，全靠手动全写地址选择，先看看效果图

现在小程序有了强大的picke地址选择器

wxml

<view class="section">
  <view class="section__title">省市区选择器</view>
  <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
    <view class="picker">
      当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
    </view>
  </picker>
</view>

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

})

小程序文档就那么强大，简直封装到你怀疑人生