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

一般在篩選的場景中需要使用下拉菜單，動(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="{{dropdownConfig}}" /> </view>

js

const Pager = require('../../components/aotoo/core/index') const mkDropdown = require('../../components/modules/dropdown')Pager({data: {dropdownConfig: mkDropdown({id: 'xxx',data: [{title: '選項(xiàng)-1'}, {title: '選項(xiàng)-2'}, {title: '選項(xiàng)-3'},{title: '選項(xiàng)-3'},],// 菜單項(xiàng)點(diǎn)擊響應(yīng)方法tap(data, index){if (index === 0) { // 第一項(xiàng)菜單點(diǎn)擊時(shí)this.updateContent({ ...checkListConfig }) // 配置彈層內(nèi)容let title = this.getTitle()}}}),}, })

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

屬性說明

id
{String}
指定實(shí)例名稱，在page中可通過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'}

指定文字

{title: '文字標(biāo)題'}

指定圖文

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

指定圖組，文字組

// 文字組 {title: ['文字標(biāo)題-1', '文字標(biāo)題-2']} // 圖片組 {img: [{src: 'path/to/imgsrc'}, {src: 'path/to/imgsrc'}]}

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

如何獲取實(shí)例

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

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

mkDropdown({ id: 'xxx' })// 獲取實(shí)例 Pager({onReady(){const instance = this['xxx']console.log(instance)} })

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

通過tap響應(yīng)方法支持，設(shè)置彈出內(nèi)容和菜單項(xiàng)標(biāo)題
tap方法的上下文(context)環(huán)境

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

updateTitle
{Function}
更新菜單項(xiàng)標(biāo)題

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

const Pager = require('../../components/aotoo/core/index') const mkDropdown = require('../../components/modules/dropdown')const listConfig = {"@list": {data: ['列表子項(xiàng)-1','列表子項(xiàng)-2','列表子項(xiàng)-3',]} } const listConfig2 = {"@list": {data: [{title: '列表子項(xiàng)-1'},{title: '列表子項(xiàng)-2'},{title: '列表子項(xiàng)-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: '選項(xiàng)-1'}, // tap => bind:tap{title: '選項(xiàng)-2'}, // aim => catch:tap{title: '選項(xiàng)-3'},{title: '選項(xiàng)-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(包含表格)、評(píng)分組件、水果老虎機(jī)、折疊面板、雙欄分類導(dǎo)航(左右)、刮刮卡、日歷等組件

總結(jié)

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

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