Lynx
指引
API
博客
贡献
指引
API
博客
贡献
简体中文

<overlay>

<overlay> 是特意为 Hybrid App 设计的元件，其子内容能脱离 LynxView 的文档流，fix 到客户端页面中。

  • 在 Hybrid App 中如使用 LynxView 作为 Feed 卡片，则可以使用<overlay>来构建弹窗。
  • 当使用 LynxView 来构建一整个页面时，不建议使用<overlay>，直接使用 position: fixed 是更简单的处理方式。

使用指南

INFO
  • <overlay>只能有一个直接子节点，且<overlay>本身需要设置必需的 CSS 属性：
    • <overlay style="position: fixed;"/>
  • <overlay> 只是一个容器，不占据任何空间，因此它本身不需要拥有任何的宽度和高度，也不影响父容器的布局
  • <overlay> 会自动将内部的子节点统一放到合适的层级，不需要额外设置z-index、translateZ等属性
  • <overlay> 的唯一子节点的宽高基线默认是屏幕尺寸，建议它作为一个单独的容器承载所有的绘制内容
    • 建议将这个子节点作为 backdrop 来绘制蒙层，（即使它有可能是透明的）并设置 width:100%; height:100%;
    • 如需调整视觉上「弹窗」的尺寸，建议在这个子节点的内部设置marign等参数
  • <overlay>所有内部子节点的布局:
    • 可以使用position: absolute但不能再出现position: fixed
    • 当使用z-index时，必须保证其所在的 stacking context 是<overlay>自身，不然会吸附到<page>中
<overlay class="overlay">
  <view class="backdrop">
    // Dialog Content
    <BizContent class="biz-content" />
  </view>
</overlay>
.overlay {
  overflow: visible;
  position: fixed;
  z-index: 0;
}
.backdrop {
  width: 100%;
  height: 100%;
  background: gray;
}
.biz-content {
  margin: 100px;
  position: absolute;
}

使用<overlay>来创建弹窗

overlaysrc/base/index.tsx
预览

属性

ios-enable-swipe-back

iOS only 
// @defaultValue: false
'ios-enable-swipe-back'?: boolean;

当 overlay 显示时，'true' 允许右滑关闭当前页面，'false' 不允许。

level

Android only
iOS only
Clay only
Harmony only 
// @defaultValue: 1
level?: 4 | 2 | 1 | 3;

引入层级概念，共分为四个层级。层级数字越大越靠近底部。默认为第 1 层。层级按 1 到 4 的顺序排列，显示的层级是指定的，不受显示顺序影响。同一层级内的排列遵循“后进先出”逻辑。overlay 显示期间不可动态调整层级，只能在隐藏时调整。*

mode

iOS only 
// @defaultValue: 'window'
mode?: string;

指定 iOS 上 overlay 内容的挂载层级。window：挂载到窗口（应用顶层）；top：挂载到 topViewController；page：挂载到 UINavigationController；others：在客户端自定义类名。

visible

Android only
iOS only
Clay only
Harmony only 
// @defaultValue: false
visible?: boolean;

控制 overlay 是否显示

事件

前端可绑定对应事件回调以监听元素运行时行为，如下所示。

binddismissoverlay

Android only
iOS only
Clay only
Harmony only 
binddismissoverlay = (e: BaseEvent) => {};

overlay 隐藏时回调。

binderror

Android only
2.18 
binderror = (e: OverlayErrorEvent) => {};
字段类型可选默认平台起始版本说明
errorCodestring否–
Android only		错误码：0 - 正常显示；非 0 - 无法显示，可尝试通过下文提到的预加载方案适配容器来解决。
errorMsgstring否–
Android only		错误信息

触摸 overlay 时回调。

bindoverlaytouch

Android only
iOS only
Clay only 
bindoverlaytouch = (e: OverlayTouchEvent) => {};
字段类型可选默认平台起始版本说明
stateOverlayTouchState否–
Android only
iOS only
Clay only		触摸状态
xnumber否–
Android only
iOS only
Clay only		相对窗口的 x 坐标，单位 px
ynumber否–
Android only
iOS only
Clay only		相对窗口的 y 坐标，单位 px

触摸 overlay 时回调。

bindrequestclose

Android only
Clay only
Harmony only 
bindrequestclose = (e: BaseEvent) => {};

点击返回按钮时回调。

bindshowoverlay

Android only
iOS only
Clay only
Harmony only 
bindshowoverlay = (e: BaseEvent) => {};

overlay 显示时回调。

兼容性

LCD tables only load in the browser

除非另有说明，本项目采用知识共享署名 4.0 国际许可协议进行许可，代码示例采用 Apache License 2.0 许可协议进行许可。