微信小程序三级菜单

最新推荐文章于 2025-08-28 09:35:20 发布

原创

最新推荐文章于 2025-08-28 09:35:20 发布 · 6.6k 阅读

24 ·

CC 4.0 BY-SA版权

本文介绍了如何在微信小程序中使用picker组件实现三级菜单，包括普通选择器、多列选择器、时间选择器、日期选择器和省市区选择器的使用方法，并提供了相关代码示例和事件对象的详细说明。

微信小程序实现三级菜单真的很简单,使用的组件是picker,我们看下它的官网描述：

从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器

mode取值有如下：

普通选择器：mode = selector

多列选择器：mode = multiSelector

时间选择器：mode = time

日期选择器：mode = date

省市区选择器：mode = region

然后对着文档查看它的属性,我们先来个简单的,普通选择器

属性名	类型	默认值	说明
range	Array / Object Array	[]	mode为 selector 或 multiSelector 时，range 有效
range-key	String		当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value	Number	0	value 的值表示选择了 range 中的第几个（下标从 0 开始）
bindchange	EventHandle		value 改变时触发 change 事件，event.detail = {value: value}
disabled	Boolean	false	是否禁用
bindcancel	EventHandle		取消选择或点遮罩层收起 picker 时触发

多写demo玩,

wxml:

<view class='container'>
   <text class="title">普通选择器</text>
   <picker mode = "selector" value="{
  
  {countryIndex}}" range="{
  
  {region}}">
    <view class="tui-picker-detail">{
  
  {region[countryIndex]}}</view>
   </picker>
</view><