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

2020-09-18 11:21 更新

用作标签卡筛选。

扫码体验

示例代码

{
 "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

属性 类型 默认值 描述
show Boolean true 是否显示。可选值 true、false。
max Number 10000 可选数量最大值,1为单选。
equalRows Number - 把filter-item等分成2或者3列。可选值:2、3。
onChange (e: Object) => void - 多选时提交选中回调。
onMaskTap () => void - 点击遮罩层时触发,可用于关闭 filter。

filter-item

属性 类型 默认值 描述 必填
className String - 自定义样式。 -
value String - 值。 true
id String - 自定义标识符。 -
selected Boolean false 默认选中。可选值:true、false。 -
onChange (e: Object) => void - 单选时提交选中回调。 -

常见问题

Filter 组件是否能过滤,如果 value 里面有一串文字,过滤中间部分?

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

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

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

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号