全部产品

筛选(filter)

filter 用作标签卡筛选。

filter

属性名 类型 默认值 描述 必选
show String hide 是否显示。
可选值: showhide
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

代码示例

   
  1. {
  2. "defaultTitle": "小程序 AntUI 组件库",
  3. "usingComponents": {
  4. "filter": "mini-antui/es/filter/index",
  5. "filter-item": "mini-antui/es/filter/filter-item/index"
  6. }
  7. }
   
  1. <filter show="{{show}}" max="{{5}}" onChange="handleCallBack">
  2. <block a:for="{{items}}">
  3. <filter-item value="{{item.value}}" id="{{item.id}}" selected="{{item.selected}}"/>
  4. </block>
  5. </filter>
   
  1. Page({
  2. data: {
  3. show: true,
  4. items: [
  5. { id: 1, value: '衣服', selected: true },
  6. { id: 1, value: '橱柜' },
  7. { id: 1, value: '衣架' },
  8. { id: 3, value: '数码产品' },
  9. { id: 4, value: '防盗门' },
  10. { id: 5, value: '椅子' },
  11. { id: 7, value: '显示器' },
  12. { id: 6, value: '某最新款电子产品' },
  13. { id: 8, value: '某某牌电视游戏底座' },
  14. ]
  15. },
  16. handleCallBack(data) {
  17. my.alert({
  18. content: data
  19. });
  20. },
  21. toggleFilter() {
  22. this.setData({
  23. show: !this.data.show,
  24. });
  25. }
  26. });