支付宝小程序浮层组件 筛选·filter

用作标签卡筛选。

扫码体验

示例代码

{
 "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 里面有一串文字，过滤中间部分？

不支持。目前没有相关操作。

弹窗圆角限定值、高度范围分别是多少呢？

• filter 中的 item 元素对于圆角是可以自定义，目前值为 4px，如有需要可通过小程序开发者工具查找到相对应的类名，通过 CSS 重新定义覆盖样式。
• filter 中的内容列表区域最大高度是 415px（max-height: 415px;），如有需要也可通过小程序开发工具查找到相对应的类名去修改。