筛选（filter） - 移动开发平台 mPaaS

filter 用作标签卡筛选。

filter

属性名	类型	默认值	描述	必选
show	String	hide	是否显示。可选值： `show`、 `hide`。	false
max	Number	10000	可选数量的最大值。选择 1 时，表示单选。	false
onChange	(e: Object) => void	-	多选时提交选中回调。	false

filter-item

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

代码示例

{
  "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">
  <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,
    });
  }
});