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

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

支持

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

配置

wxml模板

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

js

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'},],// 菜單項點擊響應(yīng)方法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)境

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

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(包含表格)、評分組件、水果老虎機、折疊面板、雙欄分類導(dǎo)航(左右)、刮刮卡、日歷等組件

總結(jié)

以上是生活随笔為你收集整理的小程序下拉菜单组件(含多层筛选)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。