< 文档首页
全部产品
弹性计算
存储
数据库
安全
大数据
人工智能
网络与CDN
视频服务
容器与中间件
开发与运维
API与工具
物联网
物联网行业方案
专有云
专有云（线下）
企业应用与服务
数字金融
域名与网站
工商财税与知识产权
解决方案
会员服务
更多
搜本产品
搜全站

    筛选（filter）

    更新时间：2021-04-21 15:40:06

    ★ 我的收藏
    本页目录

    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

    代码示例

    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. });
    上一篇：气泡（popover）
    下一篇：对话框（modal）
    相关文档
    相关产品
    • 移动开发平台 mPaaS
      移动开发平台（Mobile PaaS，简称 mPaaS）是源于支付宝 App 的移动开发平台，为移动开发、测试、运营及运维提供云到端的一站式解决方案，能有效降低技术门槛、减少研发成本、提升开发效率，协助企业快速搭建稳定高质量的移动 App。
    • 移动推送
      移动推送（Mobile Push）是提供给移动开发者的移动端消息推送服务，通过在App中集成推送功能，进行高效、精准、实时的消息推送，从而使业务及时触达用户，提高用户粘性。
    • 移动研发平台EMAS
      移动研发平台（Enterprise Mobile Application Studio，简称EMAS），面向企业服务市场，期望把阿里巴巴近十年在移动互联网行业沉淀的DevOps研发支撑能力、移动App基础中间件能力开放给客户，帮助传统企业快速实现移动数字化的转型目标。