FireFlyTest
FireFlyTest
  • 发布:2022-05-21 14:36
  • 更新:2024-05-20 17:16
  • 阅读:941

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

分类:uni-app

产品分类: 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 负责人:无 分享
已邀请:
FireFlyTest

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

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

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

FireFlyTest

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

顶一顶

FireFlyTest

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

求回答!

FireFlyTest

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

跪求回答

FireFlyTest

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

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

FireFlyTest

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

社区没人了吗?

FireFlyTest

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

社区没人了吗?

FireFlyTest

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

????

FireFlyTest

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

?????

FireFlyTest

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

????

FireFlyTest

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

都死了吗?

FireFlyTest

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

????

FireFlyTest

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

看来社区的官方都没了?

FireFlyTest

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

????

FireFlyTest

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

?????

y***@youjiuzs.com

y***@youjiuzs.com

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

  • FireFlyTest (作者)

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

    2022-05-30 19:58

十二112

十二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

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

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

苍山暮色烟雨迟

苍山暮色烟雨迟

怎么解决的啊朋友

要回复问题请先登录注册