Trust
Trust
  • 发布:2018-01-22 12:41
  • 更新:2020-01-14 17:38
  • 阅读:2123

【分享】5+App的中View

分类:HTML5+

5+App 中的 View 大概可以分为:

  • DOM 也就是 HTML 的内容
  • Webview 做为 HTML 的容器
  • NView 原生 View
  • Map、Video 等原生的控件
  • NativeUI 系统原生界面

层级关系

默认的层级关系 DOM < Map = Webview < NView < NativeUI

  • DOM 的层级是最低的,因此经常出现某些 HTML 的内容被其它更高层级 View 遮挡的情况。
  • Map = Webview 其实不够严谨。原生控件创建后,会与当前 Webview 建立关联关系,可以简单理解为层级一致。
  • Webview < NView 是默认的情况,如果 NView 被 append 到 Webview 的话,NView 的层级则会跟随父 Webview。
  • NativeUI 系统原生界面的层级是最高的

下面通过一些示例,来验证一下这些层级关系。

示例

这里要先提一句,一个新的 Webview 创建并且显示,默认都会置于栈顶,也就是说会在当前所有 Webview 的最上层。

地图

  • NativeUI 弹出框在 Webview 与 Map 上层
  • 新的Webview 新开一个 Webview 会遮挡包含 Map 的 Webview。

NView

  • NView 默认情况下,层级是高于所有 Webview 的。
  • 不append 此时点击“新开窗口”或“返回”,会一直看到 NView 的存在。

  • append 此时 NView 作为 Webview 的一部分存在,层级与父 Webview 一致,点击“新开窗口”或“返回”不会再看到 NView 的存在。

  • NativeUI 弹出框始终会在 NView 上层

源码

示例的具体代码,见附件。

4 关注 分享
移动达人 五块钱的果汁 lhyh 菜鸡

要回复文章请先登录注册

luodantingaaaa@163.com

luodantingaaaa@163.com

回复 sacrg793@aliyun.com :
请问您用了哪个插件呢?方便告知一下嘛?
2020-01-14 17:38
sacrg793@aliyun.com

sacrg793@aliyun.com

回复 nox2010@qq.com :
还没有解决哦,我用了别人的插件。
2019-11-21 12:27
nox2010@qq.com

nox2010@qq.com

回复 sacrg793@aliyun.com :
同问,请问您现在解决了这个问题了吗?
2019-05-19 22:30
sacrg793@aliyun.com

sacrg793@aliyun.com

不知道plus.video全屏时用哪个VIEW覆盖。
2019-02-16 15:50
wen如故i

wen如故i

回复 Trust :
http://ask.dcloud.net.cn/question/48366,需要传个案例上来么?
2018-01-22 15:14
H5_flymorn

H5_flymorn

很棒,清晰,尤其是地图这个容器
2018-01-22 14:26
Trust

Trust (作者)

回复 wen如故i :
原贴地址贴一下
2018-01-22 14:05
wen如故i

wen如故i

有个问题,我主页有地图,底部菜单有扫码按钮,点击打开扫码页。我这个主页(底部webview切换模式的那种)的地图还是会遮挡扫码,上次提交这个bug,说是解决了。我用最新版hb,连接电脑测试还是一样会遮挡。
2018-01-22 12:59
移动达人

移动达人

不错,简单明了。
2018-01-22 12:44