支付宝小程序浮层组件 筛选·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
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| 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;），如有需要也可通过小程序开发工具查找到相对应的类名去修改。