DropMenu 下拉菜单

使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2.   "w-drop-menu": "wuss-weapp/w-drop-menu/index",
  3. }

视频演示

代码演示

  1. <w-drop-menu options="{{  options  }}" bind:onChange="handleChange">
  2.     <w-cell-group slot="filter">
  3.         <w-radio color="#ff9900" options="{{  radioOptions  }}" />
  4.         <w-checkbox icon-type="box" options="{{ checkboxOptions }}" />
  5.         <w-cell label="我已阅读条款">
  6.             <w-switch color="#ff9900" slot="content" />
  7.         </w-cell>
  8.         <w-button
  9.          flat
  10.          full
  11.          type="warn"
  12.         >确定
  13.         </w-button>
  14.     </w-cell-group>
  15. </w-drop-menu>
  1. data: {
  2.   options: [{
  3.       text: '最高评分',
  4.       type: 'sort',
  5.     },
  6.     {
  7.       text: '风格',
  8.       type: 'radio',
  9.       options: [{
  10.           text: '全部',
  11.         },
  12.         {
  13.           text: '原创',
  14.         },
  15.         {
  16.           text: '漫改',
  17.         },
  18.         {
  19.           text: '轻改',
  20.         },
  21.         {
  22.           text: '游戏改',
  23.         },
  24.         {
  25.           text: '动态漫',
  26.         },
  27.         {
  28.           text: '布袋戏',
  29.         },
  30.         {
  31.           text: '热血',
  32.         },
  33.         {
  34.           text: '奇幻',
  35.         },
  36.         {
  37.           text: '战斗',
  38.         },
  39.         {
  40.           text: '搞笑',
  41.         },
  42.         {
  43.           text: '日常',
  44.         },
  45.         {
  46.           text: '科幻',
  47.         },
  48.         {
  49.           text: '萌系',
  50.         },
  51.         {
  52.           text: '治愈',
  53.         },
  54.         {
  55.           text: '校园',
  56.         },
  57.       ],
  58.     },
  59.     {
  60.       text: '类型',
  61.       type: 'checkbox',
  62.       options: [{
  63.           text: '国产',
  64.         },
  65.         {
  66.           text: '正片',
  67.         },
  68.         {
  69.           text: '剧场版',
  70.         },
  71.         {
  72.           text: '日本动漫',
  73.         },
  74.         {
  75.           text: '其他',
  76.         },
  77.       ],
  78.     },
  79.     {
  80.       text: '筛选',
  81.       type: 'filter',
  82.       slotName: 'filter',
  83.     },
  84.   ],
  85.   radioOptions: ["全部", "正片", "剧场版", "其他"],
  86.   checkboxOptions: ["免费","付费","大会员"],
  87. },
  88. handleChange(e) {
  89.   console.log(e);
  90. },

API

Attribute 属性

属性说明类型默认值
options父组件传递过来的菜单数组对象, 参数有: text,show,highlight,optionsarray-
options.type筛选栏类型[radio/checkbox/filter/sort/custom]string-
defaultColor默认颜色string999999
activeColor激活颜色stringff8800
heightbar的高度string, number88rpx
border显示底部线条booleantrue
popupStyles弹出层的样式string-

Event 事件

事件名说明参数
onChange筛选条件选中或改变时的回调event

Slot 插槽

名称说明
filter当options的item type为filter并且定义了slotName时为对应组件的slot名称

Class 自定义类名

类名说明
wuss-class根节点样式类