圖例中篩選是另外一個(gè)組件

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

支持

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

配置

wxml模板

<view class="container">
  <ui-list list="{{tabConfig}}" />
</view>
復(fù)制代碼

js

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

Pager({
  data: {
    tabConfig: mkDropdown({
      id: 'xxx',
      data: [
        {title: '選項(xiàng)-1'}, 
        {title: '選項(xiàng)-2'}, 
        {title: '選項(xiàng)-3'},
        {title: '選項(xiàng)-3'},
      ],
      tap(data, index){
        if (index === 0) {
          this.updateContent({ ...checkListConfig })  // 配置彈層內(nèi)容
          let title = this.getTitle()
        }
      }
    }),
  },
})
復(fù)制代碼

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

屬性說(shuō)明

id

{String}

指定實(shí)例名稱，在page中可通過(guò)this[id]找到實(shí)例

data

{Array}

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

tap

{Function}

下拉菜單項(xiàng)點(diǎn)擊時(shí)的響應(yīng)事件

如何設(shè)置

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

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

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

指定圖片

{img: 'path/to/imgsrc'}
復(fù)制代碼

指定文字

{title: '文字標(biāo)題'}
復(fù)制代碼

指定圖文

{title: '文字標(biāo)題', img: 'path/to/imgsrc'}  

// 更改圖文順序只需要把屬性位置倒置  
{img: 'path/to/imgsrc', title: '文字標(biāo)題'}
復(fù)制代碼

指定圖組，文字組

// 文字組
{title: ['文字標(biāo)題-1', '文字標(biāo)題-2']}  

// 圖片組
{img: [{src: 'path/to/imgsrc'}, {src: 'path/to/imgsrc'}]}
復(fù)制代碼

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

如何獲取實(shí)例

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

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

mkDropdown({ id: 'xxx' })

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

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

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

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

1. updateContent

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

2. updateTitle

   {Function}

   更新菜單項(xiàng)標(biāo)題

3. getTitle

   {Function}

   獲取當(dāng)前菜單項(xiàng)標(biāo)題

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

更新彈出類容為列表

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

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

更新彈出類容為表單

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

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

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

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

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