微信小程序 三级菜单

微信小程序实现三级菜单真的很简单,使用的组件是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