如何设置筛选卡Filter_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

向下弹出的菜单面板，用于筛选、排序并更改当前页面内容展示范围或顺序，需要配合 FilterItem 组件使用。

属性

Filter

属性	类型	必填	默认值	说明
uid	string	否	-	当页面有多个 Filter 时需传入，必须页面唯一，与内部的 FilterItem 组件的 uid 一致
className	string	否	-	类名

FilterItem

属性	类型	必填	默认值	说明
type	'default' \| 'multiple'	否	'default'	类型 default：单选 multiple：多选
value	any	否	-	每一项的值，该组件仅支持受控模式
items	{value: string; text: string; subText: string}[]	否	-	type 为 default 或 multiple 时有效
placeholder	string	否	-	当该项值为空的时候显示文案
uid	string	否	-	当页面有多个 Filter 时需传入，必须页面唯一，与外部的 Filter 组件的 uid 一致
className	string	否	-	类名

事件

FilterItem

事件名	说明	类型
onChange	选中的选项变更后，触发此回调	`(changedFields: Record<string, any>, allFields: Record<string, any>) => void`
onOpen	打开选择面板时，触发此回调	`() => void`

样式类

类名	说明
amd-filter	整体样式
amd-filter-bar	标签栏样式
amd-filter-bar-text	标题栏标题样式
amd-filter-bar-text-icon	标题栏 Icon 样式
amd-filter-items	选择面板样式

类名	说明
amd-filter-item	整体样式
amd-filter-item-content	内容样式
amd-filter-item-content-wrap	选择面板区域样式
amd-filter-item-btns	按钮区域样式
amd-filter-item-btns-button	重置/确定按钮样式

代码示例

基本使用

index.axml 的代码示例如下：

<view>
  <demo-block title="两项筛选" padding="0">
    <filter 
      uid="filter-1" 
      className="filter-1">
      <filter-item
        uid="filter-1"
        placeholder="筛选项一"
        value="3"
        items="{{items}}"
        type="default" 
        ref="ref"
        onChange="changeSelect"
        onOpen="onOpen"/>

      <filter-item 
        uid="filter-1"
        placeholder="筛选项二"
        value="{{value}}"
        items="{{items1}}"
        type="multiple" 
        onChange="changeSelect"
        onOpen="onOpen"
        />
    </filter>
  </demo-block>
  <demo-block title="三项筛选" padding="0">
    <filter
      uid="filter-2" 
      className="filter-2">
      <filter-item
        uid="filter-2"
        placeholder="筛选项一"
        value="3"
        items="{{items}}"
        type="default" 
        ref="ref"
        onChange="changeSelect"
        onOpen="onOpen"/>
    
      <filter-item 
        uid="filter-2"
        placeholder="筛选项二"
        value="{{value}}"
        items="{{items1}}"
        type="multiple" 
        onChange="changeSelect"
        onOpen="onOpen"
        />
    
      <filter-item 
        uid="filter-2"
        placeholder="筛选项过长"
        value=""
        items="{{items}}" 
        onChange="changeSelect"
        onOpen="onOpen"/>
    
    </filter>
  </demo-block>
  <demo-block title="四项筛选" padding="0">
    <filter
      uid="filter-3" 
      className="filter-3">
      <filter-item
        uid="filter-3"
        placeholder="筛选项一"
        value="3"
        items="{{items}}"
        type="default" 
        ref="ref"
        onChange="changeSelect"
        onOpen="onOpen"/>
    
      <filter-item 
        uid="filter-3"
        placeholder="筛选项二"
        value="{{value}}"
        items="{{items1}}"
        type="multiple" 
        onChange="changeSelect"
        onOpen="onOpen"
        />
    
        <filter-item
        uid="filter-3"
        placeholder="筛选项三"
        value="3"
        items="{{items}}"
        type="default" 
        ref="ref"
        onChange="changeSelect"
        onOpen="onOpen"/>
    
      <filter-item 
        uid="filter-3"
        placeholder="筛选项四"
        value="{{value}}"
        items="{{items1}}"
        type="multiple" 
        onChange="changeSelect"
        onOpen="onOpen"
        />
    
    </filter>
  </demo-block>
  <demo-block title="插槽：title 与 icon" padding="0">
    <filter 
      uid="filter-4" 
      className="filter-4">
    
      <view 
        slot-scope="item" 
        slot="title">
        {{item.title === '筛选项一' ? '筛选项 1' : '筛选项 2'}}
      </view>
    
      <view slot="icon" slot-scope="item">
        <icon 
          type="DownOutline" 
          className="amd-filter-bar-text-icon {{item.active ? 'amd-filter-bar-text-icon-up' : ''}}" />
      </view>
    
      <filter-item
        uid="filter-4"
        placeholder="筛选项一"
        value="3"
        items="{{items}}"
        type="default" 
        ref="ref"
        onChange="changeSelect"
        onOpen="onOpen"/>
    
      <filter-item 
        uid="filter-4"
        placeholder="筛选项二"
        value="{{value}}"
        items="{{items1}}"
        type="multiple" 
        onChange="changeSelect"
        onOpen="onOpen"
        />
    
    </filter>
  </demo-block>
</view>

index.js 的代码示例如下：

Page({
  data: {
    value: ['3', '5'],
    items: [
      {
        text: '选项一',
        value: '1',
      },
      {
        text: '选项二',
        value: '2',
      },
      {
        text: '选项三',
        value: '3',
      },
      {
        text: '选项四',
        value: '4',
      },
      {
        text: '选项五',
        value: '5',
      },
    ],
    items1: new Array(100).fill(0).map((_, idx) => {
      return {
        text: `选项${idx + 1}`,
        value: `${idx + 1}`,
      };
    }),
  },
  changeSelect(v) {
    if (v.length > 0) {
      my.alert({
        content: `当前选择了 ${v}`,
      });
    } else {
      my.showToast({
        content: '未选择任何一项',
      });
    }
  },
  formatValue(fv) {
    return `${fv}`;
  },
  onOpen() {
    my.alert({
      title: '选项卡打开',
    });
  },
  onTap() {
    this.ins.changeSelect('1');
  },
  ref(ins) {
    this.ins = ins;
  },
});

index.acss 的代码示例如下：

.filter-1 .amd-filter-item {
  z-index: 2;
}

.filter-2 .amd-filter-item {
  z-index: 2;
}

.filter-3 .amd-filter-item {
  z-index: 2;
}

index.json 的代码示例如下：

{
  "defaultTitle": "Filter",
  "usingComponents": {
    "filter": "antd-mini/es/Filter/index",
    "filter-item": "antd-mini/es/Filter/FilterItem/index",
    "icon": "antd-mini/es/Icon/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}