如何使用Filter进行筛选-阿里云帮助中心

用作标签卡筛选。

扫码体验

示例代码

{
  "defaultTitle": "小程序AntUI组件库",
  "usingComponents": {
    "filter": "mini-antui/es/filter/index",
    "filter-item": "mini-antui/es/filter/filter-item/index"
  }
}

<filter show="{{show}}" max="{{5}}" onChange="handleCallBack" onMaskTap="toggleFilter">
  <block a:for="{{items}}">
    <filter-item value="{{item.value}}" id="{{item.id}}" selected="{{item.selected}}"/>
  </block>
</filter>

Page({
  data: {
    show: true,
    items: [
      { id: 1, value: '衣服', selected: true },
      { id: 1, value: '橱柜' },
      { id: 1, value: '衣架' },
      { id: 3, value: '数码产品' },
      { id: 4, value: '防盗门' },
      { id: 5, value: '椅子' },
      { id: 7, value: '显示器' },
      { id: 6, value: '某最新款电子产品' },
      { id: 8, value: '某某某某某牌电视游戏底座' },
    ]
  },
  handleCallBack(data) {
    my.alert({
      content: data
    });
  },
  toggleFilter() {
    this.setData({
      show: !this.data.show,
    });
  }
});

属性

属性名	描述	类型	默认值	必填
show	是否显示可选值 show、hide。	Boolean	hide	否
max	可选数量最大值，1为单选。	Number	10000	否
onChange	多选时提交选中回调。	(e: Object) => void	-	否
onMaskTap	点击遮罩层时触发，可用于关闭 filter。	() => void	-	否

filter-item

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

常见问题

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

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

为何 IDE 上可以使用 ES6 的 filter 和 findIndex，真机调试和预览不支持？

filter 暂不支持真机调试和预览，findIndex 支持真机调试和预览。