【微信小程序】官方picker组件实现省市区选择

原创于 2025-06-22 21:21:52 发布 · 522 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #picker #选择器 #组件入门

在小程序开发过程，常常需要用户输入省市区地址，年月日等信息，使用picker组件可帮助用户提升使用体验，picker组件在点击以后会从屏幕底部弹出选择器供用户选择，十分方便，如下图所示，本文将进行该功能的实现，代码放在最后

1.<picker>的一个重要属性是mode，mode的值决定选择器类型，默认值是selector，我们如果要继续地址选择那么自然mode=“region”

<picker>的另一个重要属性则是value,如果想改变选择器弹出时的默认选中，则使用value属性通过{{}}绑定JavaScript中data的数据，需要注意的是，value的格式必须是一个数组即如下形式

最后记住，用户在选择器选择完毕后点击确定并不会直接改变数据，必须通过bindchage绑定事件使用this.setdata将事件对象event.detail.value写入js的data，如上图中的那个onAddressChange事件

注意：实际上event.detail里还有很多其他的数据如选中的城市的编号，地区的区号等等，开发中按需取用

2.项目中我们以mode=“region”为例，，这样弹出的就是地址选择器，并且删去了picker的默认参数，使当provincename为空时显示选择地址贴近显示开发逻辑，代码和最后效果如下

wxml:

<view style="margin-top: 500rpx;">
  <picker mode="region" value="{{[provincename,cityname,districtname]}}" bindchange="onAddressChange">
    <view style="margin-left:29%;" wx:if="{{provincename}}">{{provincename+' '+cityname+' '+districtname}}</view>
    <view style="margin-left:35%;" wx:else>选择所在地区</view>
  </picker>
</view>

javascript:

// index.js
Page({
  data:{
    provincename:"山东省",//省
    cityname:"济南市",//市
    districtname:"槐荫区"//区
  },
  onAddressChange(e){
    const arry=e.detail.value
    this.setData({
      provincename:arry[0],
      cityname:arry[1],
      districtname:arry[2]
    })
  }
})

效果：

此时javascript已经得到用户输入的省市区了
如有疏漏或错误，请斧正