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

    气泡（Popover）

    更新时间：2020-03-26 14:30:55

    ★ 我的收藏
    本页目录

    本文介绍气泡（Popover）。

    popover

    属性名 描述 类型 默认值 必选
    className 最外层覆盖样式 String - false
    show 气泡是否展示 Boolean false true
    showMask 蒙层是否展示 Boolean true false
    position 气泡位置可选值：top、topRight、topLeft、bottom、bottomLeft、bottomRight、right、rightTop、rightBottom、left、leftBottom、leftTop String bottomRight false

    popover-item

    属性名 描述 类型 默认值 必选
    className 单项样式 String - false
    onItemClick 单项点击事件 () => void - false

    代码示例

    1. {  
    2.   "usingComponents": {
    3.     "popover": "mini-antui/es/popover/index",
    4.     "popover-item": "mini-antui/es/popover/popover-item/index"
    5.   }
    6. }
    1. <popover
    2.   position="{{position}}"
    3.   show="{{show}}"
    4.   showMask="{{showMask}}"
    5.   onMaskClick="onMaskClick"
    6. >
    7.   <view onTap="onShowPopoverTap">点击显示</view>
    8.   <view slot="items">
    9.     <popover-item onItemClick="itemTap1">
    10.       <text>line1</text>
    11.     </popover-item>
    12.     <popover-item>
    13.       <text>line2</text>
    14.     </popover-item>
    15.   </view>
    16. </popover>
    1. Page({
    2.   data: {
    3.     position: 'bottomRight',
    4.     show: false,
    5.     showMask: true,
    6.   },
    7.   onMaskClick() {
    8.     this.setData({
    9.       show: false,
    10.     });
    11.   },
    12.   onShowPopoverTap() {
    13.     this.setData({
    14.       show: true,
    15.     });
    16.   },
    17.   itemTap1() {
    18.     my.alert({
    19.       content: '点击1',
    20.     });
    21.   },
    22. });
    上一篇：折叠面板（collapse）
    下一篇：筛选（Filter）
    相关文档
    相关产品
    • 移动开发平台 mPaaS
      移动开发平台（Mobile PaaS，简称 mPaaS）是源于支付宝 App 的移动开发平台，为移动开发、测试、运营及运维提供云到端的一站式解决方案，能有效降低技术门槛、减少研发成本、提升开发效率，协助企业快速搭建稳定高质量的移动 App。
    • 移动推送
      移动推送（Mobile Push）是提供给移动开发者的移动端消息推送服务，通过在App中集成推送功能，进行高效、精准、实时的消息推送，从而使业务及时触达用户，提高用户粘性。
    • 移动研发平台EMAS
      移动研发平台（Enterprise Mobile Application Studio，简称EMAS），面向企业服务市场，期望把阿里巴巴近十年在移动互联网行业沉淀的DevOps研发支撑能力、移动App基础中间件能力开放给客户，帮助传统企业快速实现移动数字化的转型目标。