5***@qq.com
5***@qq.com
  • 发布:2021-10-25 16:11
  • 更新:2022-11-23 10:25
  • 阅读:472

nvue里webview和原生混合的页面, webview初次点击整个页面会滚到webview部分的顶部

分类:nvue

需求:
首页nvue原生渲染,以提供好的加载体验, 但是首页会有部分活动展示会经常变更样式, 所以预想是首页其他部分原生, 活动的局部用webview加载h5页面,且能随整个页面滚动而滚动.

尝试:

  • nvue页面直接写web-view能满足自定义宽高,并且能正常流布局放置任意元素位置, 也能跟着页面元素增减,自动调整上下位置,且能随页面滚动而滚动(前提是webview高度设置为h5内页的高度);
  • 如果是用plus.webview.create创建的元素, 无法灵活布置在nvue页面上, 且始终是定位在页面之上,无法随页面滚动, 设置为position:"static", 并无效果,仍然是绝对定位的表现.
  • 如果抛弃nvue页面, 用vue页面, 直接写webview标签无法控制宽高,且全屏, 文档上看到可以用plus api创建, append到vue上(vue默认最外层就是个webview), 此时可以控制宽高, 子页面设置position:"static"确实可以随页面滚动了, 但是webview并不会随页面元素的增减而顺着页面元素调整位置.
  • 综上任然觉得方法一最好,但是方法一出现了第一次渲染后,随便点击webview的区域整个页面会跳到webview的顶部, 另外使用跳转navigate api返回的时候也会跳转到webview的顶部. 这个问题一直不知道是为什么,所以想问下社区里的大佬们
2021-10-25 16:11 负责人:DCloud_Android_ST 分享
已邀请:
DCloud_UNI_HDX

DCloud_UNI_HDX

已确认在Android App平台存在问题

  • 5***@qq.com (作者)

    也就是说并不是我写法有问题, 以后会修复的是吧? 另外我在mac上的ios模拟器上也是这样, 没有ios手机,暂时不知道ios真机是不是这样的!

    2021-10-27 09:09

9***@qq.com

9***@qq.com

作者,咱们需求几乎一致,我也是采用的第一种方案,但是web-view的高度超过屏幕本身高度的时候,web-view在ios中有弹动效果,怎么办,与页面级滚动有冲突

  • 5***@qq.com (作者)

    正常你的首页webview容器最好跟内部承载的网页页面高度一致, 也就是说你可以在网页渲染好之后,给app页面传一下当前页面高度,然后每次页面高度更新都通知一下app, app实时更改webview容器高度为当前页面高度. webview容器高度跟页面高度一致的时候好像就不会出现你说的这种情况. 你可以试下!

    2022-05-31 15:15

  • 9***@qq.com

    回复 5***@qq.com: 我尝试过,哪怕web-view区域的高度我给他设置1万px,仍然具有弹性滚动,烦死了!

    2022-06-01 08:28

  • 5***@qq.com

    回复 9***@qq.com: 那是因为你web-view加载的h5页面发生了body级别滚动了,你如果是用uni-app项目开发的h5页面,可以这样处理:


    App.vue里写

    html,

    body {

    width: 100vw;

    height: 100vh;

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    }


    body {  
    overflow-x: hidden;
    }

    uni-app,

    uni-page,

    uni-page-wrapper,

    uni-page-body,

    uni-view{

    box-sizing: border-box;

    }

    uni-page-body {

    height: 100%;

    display: flex;

    flex-direction: column;

    }


    index.vue里写

    <view class="content">


    .content {

    flex: 1;


        display: flex;  
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */

    overflow-y: auto;
    overflow-x: hidden;

    -webkit-overflow-scrolling: touch;
    }

    2022-10-18 23:03

corsun

corsun

2022-08-15 还是没解决

  • 5***@qq.com (作者)

    确实, 我也在等. 时不时会开个demo试下

    2022-08-16 11:50

  • corsun

    回复 5***@qq.com: 官方说这个bug不好解决,目前还没有解决方案。。。

    2022-08-25 10:40

5***@qq.com

5***@qq.com

nvue里webview和原生混合的页面, webview初次点击整个页面会滚到webview部分的顶部。这个bug影响挺大的,都无法使用高度大于屏幕的webview了,望大神们能尽快修复这个bug吧

corsun

corsun

啥时候能修复啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊

要回复问题请先登录注册