Adlaw
Adlaw
  • 发布:2024-11-20 17:27
  • 更新:2024-11-22 17:20
  • 阅读:485

vue3转鸿蒙web-view的页面被顶部状态栏盖住的问题。

分类:uni-app

之前安卓,IOS用的currentWebview.children()[0].setStyle方法在鸿蒙上不生效。给web-view标签上设置margin-top之类的样式也没用。官方可以给一个解决方案吗?卡在这个问题很久了

2024-11-20 17:27 负责人:无 分享
已邀请:
DCloud_UNI_LXH

DCloud_UNI_LXH

运行没问题啊

  • 2***@qq.com

    我这也有这个问题 uniapp 提供的模板用的是template1.3.4版本的 跟这个有关系吗

    2024-11-22 17:34

  • DCloud_UNI_LXH

    回复 2***@qq.com: 推荐还是使用新版的 hx 运行

    2024-11-22 19:46

DCloud_UNI_LXH

DCloud_UNI_LXH

设置安全区试试看,在 https://uniapp.dcloud.net.cn/collocation/manifest-app.html 中搜索 safearea

  • Adlaw (作者)

    safearea里面有left,right,bottom,但是没有top这个配置。

    2024-11-21 15:01

  • DCloud_UNI_LXH

    回复 Adlaw: 给 web-view 标签加比如 padding-top 管用吗?

    2024-11-21 15:20

  • Adlaw (作者)

    回复 DCloud_UNI_LXH: 不行,我margin,padding,position还有在上面多加个dom元素这些都试了

    2024-11-21 15:22

  • DCloud_UNI_LXH

    回复 Adlaw:



    1. fullscreen 给 false

    2. width 和 height 给 100%

    3. 设置 padding-top


    实测可以

    2024-11-21 19:45

  • DCloud_UNI_LXH

    padding 设置参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-safe-area-insets-V5#对网页元素进行避让

    2024-11-21 19:47

8***@qq.com

8***@qq.com - 欢迎观看最近更新的《uni-app 踩坑实录》,涉及一些在文档上不容易看到的疑难杂症的解决方案。https://www.bilibili.com/cheese/play/ss60198

你这个方法,放到setTimeout里边试试呢 我是在安卓上运行可以用,鸿蒙不清楚了

  • Adlaw (作者)

    我已经设置这个了,之前安卓就是这样解决的,鸿蒙不行

    2024-11-21 14:53

Adlaw

Adlaw (作者)

1111

  • 8***@qq.com

    兄弟 这个好使不?

    2024-11-21 15:02

  • Adlaw (作者)

    回复 8***@qq.com: 不好使,就没top这个配置:(

    2024-11-21 15:04

2***@qq.com

2***@qq.com

哥们 解决了么 真的兼容性做的太差了 转成鸿蒙项目之后 webview没有setStyle这个方法,我也是这样用直接报错了

  • Adlaw (作者)

    没法解决啊。。。感觉官方现在都不知道怎么解决

    2024-11-21 16:50

2***@qq.com

2***@qq.com

直接webview标签上设置webViewStyle这个也不会生效

DCloud_UNI_LXH

DCloud_UNI_LXH

  1. web-view 标签给 :fullscreen="false"
  2. width 和 height 都是 100%
  3. padding-top 设置为 env(safe-area-inset-top)
  • Adlaw (作者)

    这个我试了也是不行,我下面截图了,你看下

    2024-11-22 09:38

  • DCloud_UNI_LXH

    回复 Adlaw: 你使用我的代码跑一下看看


    <template>  
    <web-view :style="webviewStyles" :src="url" @message="getMessage" :fullscreen="false"></web-view>
    </template>

    <script>
    export default {
    data() {
    return {
    url: 'https://uniapp.dcloud.net.cn/',
    webviewStyles: {
    width: '100%',
    height: '100%',
    paddingTop: 'env(safe-area-inset-top)',
    },
    }
    },
    onLoad(options) {
    if (options && options.url) {
    this.url = options.url
    }
    },
    methods: {
    getMessage(event) {
    uni.showModal({
    content: JSON.stringify(event.detail),
    showCancel: false,
    })
    },
    },
    }
    </script>

    2024-11-22 11:05

  • Adlaw (作者)

    回复 DCloud_UNI_LXH: 给你的放上去了,也是被盖住的

    2024-11-22 11:12

  • Adlaw (作者)

    回复 DCloud_UNI_LXH: 是模拟器的问题吗?

    2024-11-22 11:17

Adlaw

Adlaw (作者)

22222222222222222

Adlaw

Adlaw (作者)

999999999999999999999

  • DCloud_UNI_LXH

    设备版本,DevEco 版本都是什么?试试升级到最新运行看呢?

    2024-11-22 16:25

  • Adlaw (作者)

    回复 DCloud_UNI_LXH: 好的,我再试试

    2024-11-22 16:31

  • Adlaw (作者)

    回复 DCloud_UNI_LXH: 我这边的DevEco 版本是5.0.3.910,设备版本是HarmonyOS 5.0.0(12)。可以和分享一下你那边用的是什么版本吗?

    2024-11-22 16:39

  • DCloud_UNI_LXH

    回复 Adlaw: 设备一样,DevEco 我使用 beta3 和 910 运行都没问题。使用模拟器,真机,在 HX 4.34 中运行我上述发的代码,表现都符合预期,我下面补了一个示例,你可以在 HX 4.34 中运行试试看

    2024-11-22 17:20

  • Adlaw (作者)

    回复 DCloud_UNI_LXH: 好的感谢

    2024-11-22 17:23

  • Adlaw (作者)

    回复 DCloud_UNI_LXH: 我下载HX 4.34运行鸿蒙会报错,之前HX 4.29没问题。报的错是:运行设备不兼容,鸿蒙模拟器目前只能在arm64平台运行jsvm。

    2024-11-28 11:25

  • DCloud_UNI_LXH

    回复 Adlaw: 是的,这是一个提示。之后 x86 平台模拟器不能查看效果了

    2024-11-30 10:22

要回复问题请先登录注册