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

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

支持

• 配置化設(shè)置彈層內(nèi)容
• 支持動態(tài)刷新彈層內(nèi)容
• 支持動態(tài)修改分類標題
• 支持遮罩層
• 支持api關(guān)閉彈層

配置

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 })  // 配置彈層內(nèi)容
          let title = this.getTitle()
        }
      }
    }),
  },
})
復制代碼

updateContent更新的結(jié)構(gòu)是一次性的，即再次打開時，實例維持不變，如果需要強制刷新，指定第二參數(shù)為true

屬性說明

id

{String}

指定實例名稱，在page中可通過this[id]找到實例

data

{Array}

配置下拉菜單的列表，組件自動生成器對應(yīng)的彈層

tap

{Function}

下拉菜單項點擊時的響應(yīng)事件

如何設(shè)置

如何設(shè)置data數(shù)據(jù)

data數(shù)組展示下拉菜單的所有菜單項，每一項必須為Object類型的數(shù)據(jù)，每一項數(shù)據(jù)可自定義，支持圖片，文字，圖片組，文字組等等

菜單項由item組件構(gòu)成，因此可以支持非常豐富的結(jié)構(gòu)用于展示

指定圖片

{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'}]}
復制代碼

同時也支持圖組，文字組混排，根據(jù)需求

如何獲取實例

當指定id后，便可以在page頁中，方便的獲取下拉菜單的實例，調(diào)用實例方法

注意Pager和Page的區(qū)別，Page是微信小程序原生方法，Pager是對Page的二次封裝，Pager支持原生Page的所有屬性、方法，但反過來則不能支持

mkDropdown({ id: 'xxx' })

// 獲取實例  
Pager({
  onReady(){
    const instance = this['xxx']
    console.log(instance)
  }
})
復制代碼

如何配置彈層內(nèi)容

通過tap響應(yīng)方法支持，設(shè)置彈出內(nèi)容和菜單項標題

tap方法的上下文(context)環(huán)境

1. updateContent

   {Function} 更新菜單項彈出層內(nèi)容

2. updateTitle

   {Function}

   更新菜單項標題

3. getTitle

   {Function}

   獲取當前菜單項標題

mkDropdown({ 
  id: 'xxx',
  data: [...],
  tap(data, index){ // data為菜單項數(shù)據(jù)，index為菜單項位置  
    if (index === 0) {  // 菜單欄第一項
      this.updateTitle()  // 更新標題
      // this.updateContent()  更新內(nèi)容
    }
  }
})
復制代碼

更新彈出類容為列表

下列配置，會在彈出框中渲染列表結(jié)構(gòu)

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

更新彈出類容為表單

下列配置，會在彈出框中渲染列表結(jié)構(gòu)

this.updateContent({
  "@form": {
    data: [
      {title: '表單區(qū)域1', input: [...]},
      {title: '表單區(qū)域2', input: [...]},
    ]
  }
})
復制代碼

更新彈出類容為多層篩選列表

下列配置，會在彈出框中渲染列表結(jié)構(gòu)

this.updateContent({
  "@list": mkChecklist({
    ...
  })
})
復制代碼