5***@qq.com
5***@qq.com
  • 发布:2022-08-26 15:39
  • 更新:2022-08-26 18:34
  • 阅读:253

【报Bug】Android下popup类型的subNVues中嵌套的web-view内容无法滚动,IOS下正常

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: macOS Monterey 12.0.1

HBuilderX类型: Alpha

HBuilderX版本号: 3.5.4

手机系统: Android

手机系统版本号: Android 10

手机厂商: 小米

手机机型: note8pro

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

pages.json

{  
            "path": "pages/index",  
            "style": {  
                "navigationBarTitleText": "uni-app",  
                "app-plus": {  
                    "subNVues": [  
                        {  
                            "id": "nvue",  
                            "path": "pages/nvue",  
                            "type": "popup",  
                            "style": {  
                                "position": "absolute",  
                                "bottom": "0",  
                                "height": "60%"  
                            }  
                        }  
                    ]  
                }  
            }  
        }

pages/index

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <button @click="show" class="title">显示弹框</button>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  
            show () {  
                uni.getSubNVueById('nvue').show('slide-in-top')  
            }  
        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>  

pages/nvue.nvue

<template>  
    <view style="display: flex;flex-direction: column;">  
        <uni-nav-bar dark color="#999" background-color="#f5f5f5" shadow right-icon="clear" left-icon="left" title="hello" />  
        <web-view :fullscreen="false" :update-title="false" :webview-styles="{progress: false}" src="http://www.baidu.com" :style="webviewStyles"></web-view>  
    </view>  
</template>  

<script>  
    const sysInfo = uni.getSystemInfoSync()  

    export default {  
        computed: {  
            webviewStyles () {  
                return {  
                    height: (sysInfo.windowHeight * 0.6 - 40) + 'px'  
                }  
            }  
        }  
    }  
</script>  

<style>  

</style>

操作步骤:

如示例工程和APK所示

预期结果:

安卓下能够正常的滚动查看webview页面

实际结果:

安卓下不能正常的滚动查看webview页面内容

bug描述:

IOS下能够正常滚动查看整个页面,但安卓下不行,测试了安卓12、安卓10、安卓6都不行
如示例工程和apk文件所示

2022-08-26 15:39 负责人:无 分享
已邀请:
5***@qq.com

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

业务场景是需要一个webview页面来显示,然后页面是vue的,不想要全屏webview就只能放到nvue里做弹框才行

DCloud_UNI_Anne

DCloud_UNI_Anne

将:fullscreen="false"去掉试下呢?

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

    测试了一下 也不行

    2022-08-29 09:45

  • DCloud_UNI_Anne

    回复 5***@qq.com: HX3.5.5-alpha Android 11 Redmi K40 未复现此问题。

    2022-08-29 11:26

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

    回复 DCloud_UNI_Anne: 找到原因了,安卓下subnvues容器和webview内容同时存在滚动条的情况下,webview就会无法滚动,IOS下不会,现在是给webview计算了一个恰好能填满subnvues的高度,这样subnvues就不会出现滚动条,webview的滚动也就正常了

    2022-08-29 14:16

要回复问题请先登录注册