图例中筛选是另外一个组件

一般在筛选的场景中需要使用下拉菜单，动态设置筛选条件，比如淘宝，京东的产品筛选列表，携程的旅游目的地的筛选列表。

支持

• 配置化设置弹层内容
• 支持动态刷新弹层内容
• 支持动态修改分类标题
• 支持遮罩层
• 支持api关闭弹层

配置

wxml模板

<view class="container"><ui-list list="{{dropdownConfig}}" />
</view>

js

const Pager = require('../../components/aotoo/core/index')
const mkDropdown = require('../../components/modules/dropdown')Pager({data: {dropdownConfig: mkDropdown({id: 'xxx',data: [{title: '选项-1'}, {title: '选项-2'}, {title: '选项-3'},{title: '选项-3'},],// 菜单项点击响应方法tap(data, index){if (index === 0) {  // 第一项菜单点击时this.updateContent({ ...checkListConfig })  // 配置弹层内容let title = this.getTitle()}}}),},
})

updateContent更新的结构是一次性的，即再次打开时，实例维持不变，如果需要强制刷新，指定第二参数为true

属性说明

id
{String}
指定实例名称，在page中可通过this[id]找到实例

data
{Array}
配置下拉菜单的列表，组件自动生成器对应的弹层

tap
{Function}
下拉菜单项点击时的响应事件

如何设置

如何设置data数据

data数组展示下拉菜单的所有菜单项，每一项必须为Object类型的数据，每一项数据可自定义，支持图片，文字，图片组，文字组等等

菜单项由item组件构成，因此可以支持非常丰富的结构用于展示

指定图片

{img: 'path/to/imgsrc'}

指定文字

{title: '文字标题'}

指定图文

{title: '文字标题', img: 'path/to/imgsrc'}  // 更改图文顺序只需要把属性位置倒置  
{img: 'path/to/imgsrc', title: '文字标题'}

指定图组，文字组

// 文字组
{title: ['文字标题-1', '文字标题-2']}  // 图片组
{img: [{src: 'path/to/imgsrc'}, {src: 'path/to/imgsrc'}]}

同时也支持图组，文字组混排，根据需求

如何获取实例

当指定id后，便可以在page页中，方便的获取下拉菜单的实例，调用实例方法

注意Pager和Page的区别，Page是微信小程序原生方法，Pager是对Page的二次封装，Pager支持原生Page的所有属性、方法，但反过来则不能支持

mkDropdown({ id: 'xxx' })// 获取实例  
Pager({onReady(){const instance = this['xxx']console.log(instance)}
})

如何配置弹层内容

通过tap响应方法支持，设置弹出内容和菜单项标题
tap方法的上下文(context)环境

1. updateContent
   {Function}
   更新菜单项弹出层内容

2. updateTitle
   {Function}
   更新菜单项标题

3. getTitle
   {Function}
   获取当前菜单项标题

const Pager = require('../../components/aotoo/core/index')
const mkDropdown = require('../../components/modules/dropdown')const listConfig = {"@list": {data: ['列表子项-1','列表子项-2','列表子项-3',]}
}
const listConfig2 = {"@list": {data: [{title: '列表子项-1'},{title: '列表子项-2'},{title: '列表子项-3'},]}
}const imgListConfig = {"@list": {data: [{title: '嘻嘻', img: {src: '/images/huawei.jpg', itemStyle: 'width: 40px;'}},{img: {src: '/images/logo.jpg', itemStyle: 'width: 40px;'}},{img: {src: '/images/wxzan.jpg', itemStyle: 'width: 40px;'}},]}
}Pager({data: {tabConfig: mkDropdown({id: 'xxx',data: [{title: '选项-1'},  // tap => bind:tap{title: '选项-2'},  // aim => catch:tap{title: '选项-3'},{title: '选项-3'},],tap(item, index){if (index === 0) {this.updateContent({ ...checkListConfig })let title = this.getTitle()// console.log(title);}if (index === 1) {this.updateContent({ ...listConfig })}if (index === 2) {this.updateContent({ ...listConfig2 })}if (index === 3) {this.updateContent({ ...imgListConfig })}}}),},
})

源码

GITHUB
/pages/dropdown

下列小程序DEMO包含下拉菜单、通用型筛选列表、索引列表、markdown(包含表格)、评分组件、水果老虎机、折叠面板、双栏分类导航(左右)、刮刮卡、日历等组件