全部产品

Filter 筛选

用作标签卡筛选。

扫码体验

image.png

示例代码

{
  "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。Booleanhide
max可选数量最大值,1为单选。Number10000
onChange多选时提交选中回调。(e: Object) => void-
onMaskTap点击遮罩层时触发,可用于关闭 filter。() => void-

filter-item

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

常见问题

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

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

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

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