微信小程序实现三级菜单真的很简单,使用的组件是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>
wxss:
.container{
width: 750rpx;
height: 1560rpx