微信小程序表单组件picker省市区选择器使用详解

 时间:2026-04-22 04:53:52

1、先百度搜索查看 picker 滚动选择器组件的官方文档,通过设置其 mode 属性的值可使用不同的滚动选择器,不同的选择器除了公共属性外,还会有一些特殊属性。本篇经验分享省市区选择器的相关内容(即 mode = 'region')。

微信小程序表单组件picker省市区选择器使用详解

2、在 wxml 文件中,通过 <picker> 标签创建省市区选择器,相关操作如下:

1. 设置 mode 属性的值为 'region' 即省市区选择器;

2. 使用动态绑定方式设置 value 属性值,即默认省市区,包含3个元素的数组;

3. customer-item属性即每一列顶部添加一个自定义元素,通常为 "全部";

4. bindchange 属性可绑定选择器改变后的回调函数。

微信小程序表单组件picker省市区选择器使用详解

3、在 js 文件中定义上面数据绑定所使用的变量 region 和 customItem,以及 bindchange 属性绑定的回调函数。

微信小程序表单组件picker省市区选择器使用详解

4、在 wxss 文件中声明 wxml 中组件所使用的类的样式定义。

微信小程序表单组件picker省市区选择器使用详解

5、保存编译后,在模拟器中查看页面效果,符合预期,点击选择器,弹出省市区滚动选择区域;确认选择一个省市区后,会触发 bindchange 绑定的回调函数。

微信小程序表单组件picker省市区选择器使用详解

  • 在VScode中如何设置水平滚动条自动可见
  • 如何用PHP往MySQL中插入数据
  • jquery如何实现鼠标放上div时改变其大小
  • asp.net中的Button控件与LinkButton的区别?
  • Jquery如何获得div下的元素
  • 热门搜索
    安徽旅游必去十大景点 证券手续费怎么算 万家乐电热水器怎么样 可以了 怎么知道电脑密码 云南普者黑旅游攻略 药流后多久可以上班 圣旨怎么写 凉拌莴笋丝 中外合作办学怎么样