圖(tu)例中篩(shai)選是另外一(yi)個(ge)組件

一般在(zai)篩(shai)選(xuan)的(de)場景中需要使用下拉菜單，動態設置篩(shai)選(xuan)條件，比(bi)如(ru)淘寶，京東的(de)產品(pin)篩(shai)選(xuan)列(lie)表，攜(xie)程的(de)旅游目的(de)地的(de)篩(shai)選(xuan)列(lie)表。

支持

• 配置化設置彈層內容
• 支持動態刷新彈層內容
• 支持動態修改分類標題
• 支持遮罩層
• 支持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更新(xin)的結構(gou)是一次(ci)性的，即再次(ci)打(da)開(kai)時，實(shi)例維持不(bu)變，如果(guo)需要強制刷新(xin)，指定第二(er)參數(shu)為true

屬性說明

id

{String}

指定(ding)實(shi)例名稱，在(zai)page中可通(tong)過this[id]找到實(shi)例

data

{Array}

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

tap

{Function}

下拉菜單(dan)項點擊時的(de)響應事件(jian)

如何設置

如何設置data數據

data數組展示(shi)下拉菜單的(de)所有菜單項(xiang)，每一項(xiang)必須為Object類型的(de)數據，每一項(xiang)數據可自定義，支(zhi)持圖片(pian)，文字(zi)，圖片(pian)組，文字(zi)組等(deng)等(deng)

菜單項由item組件構成，因(yin)此可以支持非常豐富的(de)結構用于展(zhan)示

指定圖片

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

同(tong)時也支持(chi)圖組，文(wen)字組混排(pai)，根據需求

如何獲取實例

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

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

mkDropdown({ id: 'xxx' })

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

如何配置彈層內容

通過tap響應方法支持，設置彈出(chu)內容和菜單項標題

tap方法的上下文(context)環境(jing)

1. updateContent

   {Function} 更新菜單(dan)項彈出層內(nei)容

2. updateTitle

   {Function}

   更(geng)新菜單項標題(ti)

3. getTitle

   {Function}

   獲取當前(qian)菜(cai)單項標題

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

更新彈出類容為列表

下列配置，會(hui)在彈出(chu)框中(zhong)渲染(ran)列表結構

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

更新彈出類容為表單

下列(lie)配置，會在(zai)彈出框(kuang)中渲染(ran)列(lie)表結構

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

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

下列(lie)配置，會(hui)在彈出(chu)框(kuang)中渲染(ran)列(lie)表(biao)結(jie)構

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