圖例中篩選是另外一個(gè)組件
一般在篩選的場(chǎng)景中需要使用下拉菜單,動(dòng)態(tài)設(shè)置篩選條件,比如淘寶,京東的產(chǎ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)是一次性的,即再次打開時(shí),實(shí)例維持不變,如果需要強(qiáng)制刷新,指定第二參數(shù)為true
id
{String}
指定實(shí)例名稱,在page中可通過(guò)this[id]找到實(shí)例
data
{Array}
配置下拉菜單的列表,組件自動(dòng)生成器對(duì)應(yīng)的彈層
tap
{Function}
下拉菜單項(xiàng)點(diǎn)擊時(shí)的響應(yīng)事件
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ù)需求
當(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ù)制代碼
通過(guò)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)題
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ù)制代碼
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)