希望在网络加载的时候页面整体加一个遮罩层
每个页面添加一个遮罩层,计划使用zindex实现,页面数量10+,每个页面使用原生开发,布局都不一样;
(1)zindex是否能解决问题
(2)如果使用zindex的话,如何才能提取公共逻辑,让遮罩层的代码统一维护,只写一次。这里可能涉及@state控制,还有ArkUI公共代码的抽取。
因为每个页面的最外层容器不一样,有的是stack(), 有的是column(),因此无法用外层容器统一。
HarmonyOS
赞
收藏 0
回答 2
待解决
相关问题
HarmonyOS 如何实现一个遮罩层
442浏览 • 1回复 待解决
在ohpm publish的时候,希望同时运行一个脚本(调用一个webhook链接),怎么配置oh-package.json
265浏览 • 1回复 待解决
如何加载一个网页链接到页面中?
380浏览 • 1回复 待解决
如何实现RichEditor和Component成为一个整体
464浏览 • 1回复 待解决
如何给一张图片加上一个灰色圆形的遮罩?
397浏览 • 1回复 待解决
HarmonyOS promptAction.openCustomDialog是否可以加一个autoCancel的属性?
221浏览 • 1回复 待解决
在页面中弹出一个弹窗之后,能否检测到弹窗关闭的时候?
1913浏览 • 1回复 待解决
当Image加载网络图片时,还未加载出时,如何添加一个占位图?
472浏览 • 1回复 待解决
如何实现一个监听网络变化的方法
614浏览 • 1回复 待解决
计算索引值时,ListItemGroup作为一个整体占一个索引值,不计算ListItemGroup内部ListItem的索引值
1637浏览 • 1回复 待解决
HarmonyOS router进行页面跳转传递一个callback给下一个页面,下一个页面如何取到callback?
355浏览 • 1回复 待解决
HarmonyOS页面中加载了web网页,希望在网页H5获取数据后,传递给前端组件更新状态。这个怎么实现?
230浏览 • 1回复 待解决
HarmonyOS 在进入下一个页面时,上一个页面的弹窗会偶发的出现在下一个页面
117浏览 • 1回复 待解决
HarmonyOS如何在entry模块里面加载另一个har中的页面?
362浏览 • 1回复 待解决
希望navgation跳转的页面能有设置透明背景效果,能看到上一个页面的内容。类似弹框的背景
1887浏览 • 1回复 待解决
Web组件加载网页后,在页面内点击跳转n层后,点击系统返回键,app直接退到桌面了。如何返回上一个页面?
347浏览 • 1回复 待解决
分组列表最佳实践,希望提供一个完善的分组列表最佳实践。
990浏览 • 1回复 待解决
#鸿蒙学习大百科#如何为WindowStage的主窗口加载一个页面?
222浏览 • 0回复 待解决
HarmonyOS 如何实现给定一个url,打开一个全新的 webview 页面
29浏览 • 1回复 待解决
MySQL查询,where后面怎么加判断,如果一个字段为null使用另外一个字段?
3063浏览 • 1回复 待解决
应用层如何向HarmonyOS mainHandler插入一个任务
332浏览 • 1回复 待解决
当完成某一个业务的时候,期望跳转到目标页面,并且销毁某业务中的所有页面
1625浏览 • 1回复 待解决
封装一个网络请求的公共方法要如何实现
488浏览 • 1回复 待解决
实现一个瀑布流的滚动,触底加载数据可以无限加载
439浏览 • 1回复 待解决
要在每个页面添加一个遮罩层,并且使用
zIndex
来实现,同时保证代码的统一维护和复用,这是可以通过创建一个高阶组件(HOC)或者自定义 Hook 的方式来解决的。下面是对你的问题的详细解答和实现方案。### 方案分析
#### (1)
zIndex
是否能解决问题
zIndex
可以用于控制元素在页面上的层级关系,所以它能够解决在网络加载时显示遮罩层的问题。通过将遮罩层的 zIndex
设置为比其他内容更高,可以确保它覆盖在所有内容之上。#### (2) 如何提取公共逻辑,统一维护遮罩层代码
为了避免在每个页面重复编写遮罩层相关的代码,可以使用高阶组件(HOC)或者自定义 Hook 将遮罩层的逻辑提取到一个公共模块中。这样,只需在每个页面调用这个公共模块即可。
### 具体实现
#### 1. 创建一个 LoadingOverlay 组件
首先,我们创建一个通用的
LoadingOverlay
组件,用于显示遮罩层。#### 2. 创建一个高阶组件(HOC)
创建一个高阶组件,将遮罩层逻辑封装起来。
#### 3. 使用 HOC 在各个页面中
在各个页面组件中使用高阶组件来包裹原有的组件。
你可以在其他页面中以同样的方式使用
withLoadingOverlay
高阶组件。### 解释
LoadingOverlay
组件: 定义了一个遮罩层组件,包含一些简单的样式和 "Loading..." 文本。withLoadingOverlay
:useState
管理isLoading
状态,并提供showLoading
和hideLoading
方法来控制遮罩层的显示和隐藏。showLoading
和hideLoading
方法。Page1
:withLoadingOverlay
包裹原来的页面组件,使其具有显示和隐藏遮罩层的能力。useEffect
模拟网络请求,在组件挂载时显示遮罩层,延迟3秒后隐藏遮罩层。通过这种方式,你只需在每个页面中调用高阶组件,即可轻松实现遮罩层的统一管理和复用。如果有任何进一步的问题或需求,请随时提问!
可以使用自定义弹窗实现网络加载时页面遮罩,参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-methods-custom-dialog-box-V5
也可使用overlay,overlay可以增加遮罩文本或者作为叠加自定义组件的浮层,参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-overlay-V5
具体demo:
还可使用canvas绘制图形的方式绘制遮罩层,具体demo如下: