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的顶部. 这个问题一直不知道是为什么,所以想问下社区里的大佬们

display: flex; flex-direction: column; align-items: center; /* justify-content: center; */ overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }

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

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

2021-10-27 09:09

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

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

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

2022-08-16 11:50
corsun

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

2022-08-25 10:40

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

7 个回复

公告

相关问题

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

与内容相关的链接

7 个回复

公告

相关问题