支付寶小程序浮層組件 篩選·filter

用作標(biāo)簽卡篩選。

掃碼體驗(yàn)

示例代碼

{
 "defaultTitle": "Filter",
 "usingComponents": {
   "filter": "mini-ali-ui/es/filter/index",
   "filter-item": "mini-ali-ui/es/filter/filter-item/index"
 }
}
<filter show="{{show}}" max="{{1}}" equalRows="{{3}}">
 <block a:for="{{items}}">
   <filter-item value="{{item.value}}" subtitle="{{item.subtitle}}" id="{{item.id}}" onChange="handleCallBack" selected="{{item.selected}}" key="filter-item-{{key}}" />
 </block>
</filter>
Page({
 data: {
   show: true,
   items: [
     { id: 1, value: '衣服啊', selected: true },
     { id: 1, value: '櫥柜' },
     { id: 1, value: '衣服' },
     { id: 1, value: '櫥柜' },
     { id: 1, value: '衣服' },
     { id: 1, value: '櫥柜' },
     { id: 1, value: '衣服' },
     { id: 1, value: '櫥柜' },
     { id: 1, value: '櫥柜' },
   ],
 },
 handleCallBack(data) {
   my.alert({
     content: data,
   });
 },
 toggleFilter() {
   this.setData({
     show: !this.data.show,
   });
 },
});

屬性

filter

filter-item

常見問題

Filter 組件是否能過濾，如果 value 里面有一串文字，過濾中間部分？

不支持。目前沒有相關(guān)操作。

彈窗圓角限定值、高度范圍分別是多少呢？

• filter 中的 item 元素對于圓角是可以自定義，目前值為 4px，如有需要可通過小程序開發(fā)者工具查找到相對應(yīng)的類名，通過 CSS 重新定義覆蓋樣式。
• filter 中的內(nèi)容列表區(qū)域最大高度是 415px（max-height: 415px;），如有需要也可通過小程序開發(fā)工具查找到相對應(yīng)的類名去修改。