小程序定制组件下拉菜单

图例中的过滤器是另一个组件。

一般需要使用下拉菜单动态设置过滤场景中的过滤条件，比如淘宝、JD。COM的产品过滤列表和携程的旅游目的地过滤列表。

支持

炸弹层内容可配置设置支持炸弹层内容动态刷新支持分类标题动态修改支持屏蔽层支持炸弹层api关闭

配置

wxml模板

view class=' container ' ui-list=' { { tab config } } '//view copy code js

常量寻呼机=要求('././components/aotoo/core/index ')const MkDrOp=require('././components/modules/drop down ')Pager({ data : { tab config 3360 MK drop down({ id 3360 ' XXX '，data3360 [{title3360' option-1'}，{title3360' option -3'})，{ title 3360 ' option-3 ' }，]，tap (data，index) {if (index==0) {this。更新内容({ 0.checklistcconfig })//配置项目符号层内容让title=this.getTitle()}}})，}，})复制代码updateContent更新的结构是一次性的，即再次打开时，实例保持不变。如果需要强制刷新，请将第二个参数指定为true。

属性说明

id

{字符串}

指定实例名，可以通过页面中的这个[id]找到该实例。

数据

{数组}

配置下拉菜单列表，以及组件自动生成器对应的项目符号层。

轻敲，水龙头

{功能}

单击下拉菜单项时的响应事件

如何设置

如何设置data数据

数据数组显示了下拉菜单的所有菜单项，每一项都必须是Object类型的数据，并且每一项数据都可以自定义，支持图片、文本、图片组、文本组等等。

菜单项由项目组件组成，因此它们可以支持非常丰富的呈现结构。

指定图片

{ title : ' path/to/imgsrc ' }复制代码

指定文字

{ title : ' text 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({    ...  })})复制代码