全部产品
云市场

筛选(Filter)

更新时间:2020-04-28 16:55:23

Filter 用作标签卡筛选。

filter

属性名 描述 类型 默认值 必选
show 是否显示 可选值 show hide String hide false
max 可选数量最大值,1 为单选 Number 10000 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. });