小程序自定义组件之下拉菜单一般在筛选的场景中需要使用下拉菜单，动态设置筛选条件，比如淘宝，京东的产品筛选列表，携程的旅游

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

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

支持

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

配置

wxml模板

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

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)环境

updateContent
{Function} 更新菜单项弹出层内容
updateTitle
{Function}
更新菜单项标题
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(包含表格)、评分组件、水果老虎机、折叠面板、双栏分类导航(左右)、刮刮卡、日历等组件