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

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

支持

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

配置

wxml模板

<view class="container">
  <ui-list list="{{tabConfig}}" />
</view>
复制代码

js

const Pager = require('../../components/aotoo/core/index')
const mkDropdown = require('../../components/modules/dropdown')

Pager({
  data: {
    tabConfig: 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}

   获取当前菜单项标题

mkDropdown({ 
  id: 'xxx',
  data: [...],
  tap(data, index){ // data为菜单项数据，index为菜单项位置  
    if (index === 0) {  // 菜单栏第一项
      this.updateTitle()  // 更新标题
      // this.updateContent()  更新内容
    }
  }
})
复制代码

更新弹出类容为列表

下列配置，会在弹出框中渲染列表结构

this.updateContent({
  "@list": {
    data: [
      {title: '1'},
      {title: '2'},
    ]
  }
})
复制代码

更新弹出类容为表单

下列配置，会在弹出框中渲染列表结构

this.updateContent({
  "@form": {
    data: [
      {title: '表单区域1', input: [...]},
      {title: '表单区域2', input: [...]},
    ]
  }
})
复制代码

更新弹出类容为多层筛选列表

下列配置，会在弹出框中渲染列表结构

this.updateContent({
  "@list": mkChecklist({
    ...
  })
})
复制代码