注册登录

FireFlyTest

发布：2022-05-21 14:36
更新：2024-05-20 17:16
阅读：951

【报Bug】web-view组件在nvue环境下具有iOS弹性滚动效果

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： win11

HBuilderX类型： Alpha

HBuilderX版本号： 3.4.11

手机系统： iOS

手机系统版本号： iOS 15

手机厂商：苹果

手机机型： iPhone 13

页面类型： nvue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

操作步骤：

web-view组件在Nvue环境下，具有iOS的弹性滚动效果，导致了富文本解析区域具有区域滚动效果，与整体页面的滚动产生了冲突。测试此前hbuilder版本没有此问题，而且vue环境下没有问题没有弹性滚动。

但是因项目原因，我们必须采用Nvue环境并且具有富文本文章区域，希望官方去掉该弹性滚动效果

预期结果：

希望官方去掉该弹性滚动效果

实际结果：

富文本解析区域具有区域滚动效果，与整体页面的滚动产生了冲突

bug描述：

web-view组件在Nvue环境下，具有iOS的弹性滚动效果，导致了富文本解析区域具有区域滚动效果，与整体页面的滚动产生了冲突。测试此前hbuilder版本没有此问题，而且vue环境下没有问题没有弹性滚动。

但是因项目原因，我们必须采用Nvue环境并且具有富文本文章区域，希望官方去掉该弹性滚动效果

2022-05-21 14:36 负责人:无分享

19 个回复

FireFlyTest (作者) - 萤火虫鸿蒙开发

当然尝试了各种
overflow: hidden;
-webkit-overflow-scrolling: auto;

都是无效的。下面是bug演示视频

WeChat_20220521144243.zip

FireFlyTest (作者) - 萤火虫鸿蒙开发

顶一顶

FireFlyTest (作者) - 萤火虫鸿蒙开发

求回答！

FireFlyTest (作者) - 萤火虫鸿蒙开发

跪求回答

FireFlyTest (作者) - 萤火虫鸿蒙开发

没人回答就只能一直顶一顶呢

FireFlyTest (作者) - 萤火虫鸿蒙开发

社区没人了吗？

FireFlyTest (作者) - 萤火虫鸿蒙开发

社区没人了吗？

FireFlyTest (作者) - 萤火虫鸿蒙开发

？？？？

FireFlyTest (作者) - 萤火虫鸿蒙开发

？？？？？

FireFlyTest (作者) - 萤火虫鸿蒙开发

？？？？

FireFlyTest (作者) - 萤火虫鸿蒙开发

都死了吗？

FireFlyTest (作者) - 萤火虫鸿蒙开发

？？？？

FireFlyTest (作者) - 萤火虫鸿蒙开发

看来社区的官方都没了？

FireFlyTest (作者) - 萤火虫鸿蒙开发

？？？？

FireFlyTest (作者) - 萤火虫鸿蒙开发

?????

y***@youjiuzs.com

web-view里面的内容有滑动回弹效果的话，我你可以在最外部直接用一个fixed定位定一下

FireFlyTest (作者)

你的意思是外面盖一层，让他无法滑动吗，那内部的超链接无法点击怎么办

2022-05-30 19:58

十二112

不考虑内容点击的情况下可以先这样处理,web-view组件嵌套一层,里面增加一个view定位在web-view之上

<view class="web">  
    <web-view class="webView" :style="{ height: viewHeight }" src="../../hybrid/html/body.html" @onPostMessage="changeMessage"></web-view>  
    <view class="webViewMask"></view>  
</view>  

.webView {  
    width: 690rpx;  
    &Mask {  
        position: absolute;  
        left: 0;  
        top: 0;  
        right: 0;  
        bottom: 0;  
    }  
}

FireFlyTest (作者)

可是我文章内部有图片可以点击放大，还有超链接点击后可以打开的啊。- -好难受啊

2022-05-30 19:58
十二112

回复 9***@qq.com: 有代码吗我试试

2022-05-31 08:50
FireFlyTest (作者)

回复 1***@qq.com: 大哥直接创建一个Nvue页面，然后引入https://ext.dcloud.net.cn/plugin?id=805插件，富文本html弄长一点，必须大于当前页面宽度，然后苹果滑动页面的时候如果手指是处于这个mp-html插件区域内，就会出现弹性滚动问题，安卓也会出现回弹阴影。因为mp-html插件的Nvue版是使用的web-view的方式降级处理的。

2022-05-31 10:30
FireFlyTest (作者)

是大于当前页面高度，说错了

2022-05-31 10:30

3***@qq.com - yokea-app

老兄，问题解决了吗，求解决方案

苍山暮色烟雨迟

怎么解决的啊朋友

FireFlyTest (作者)

换vue才行

2022-07-15 15:26

要回复问题请先登录或注册

【报Bug】web-view组件在nvue环境下具有iOS弹性滚动效果

预期结果：

希望官方去掉该弹性滚动效果

实际结果：

富文本解析区域具有区域滚动效果，与整体页面的滚动产生了冲突

bug描述：

19 个回复

公告

相关问题

【报Bug】web-view组件在nvue环境下具有iOS弹性滚动效果

预期结果： 希望官方去掉该弹性滚动效果

实际结果： 富文本解析区域具有区域滚动效果，与整体页面的滚动产生了冲突

bug描述：

与内容相关的链接

19 个回复

公告

相关问题

预期结果：

希望官方去掉该弹性滚动效果

实际结果：

富文本解析区域具有区域滚动效果，与整体页面的滚动产生了冲突