圖例中篩選是另外一個組件

一般在篩選的場景中需要使用下拉菜單，動態設置篩選條件，比如淘寶，京東的產品篩選列表，攜程的旅游目的地的篩選列表。

支持

• 配置化設置彈層內容
• 支持動態刷新彈層內容
• 支持動態修改分類標題
• 支持遮罩層
• 支持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({
    ...
  })
})
復制代碼