uni-app在自定义组件中内嵌H5/Html网页,加载不闪屏, 自定义webview大小

在自定义组件中内嵌H5/Html网页时,通过内置组件 web-view 实现(如下),发现会自动铺满整个页面,不可控制大小(默认充满屏幕不可控制大小)


<web-view src="https://uniapp.dcloud.io/static/web-view.html"></web-view>

有多个tab页面时(多个自定义组件切换时),调整webview窗口大小,会出现闪屏的现象

<template>
    <view class="content">
        <web-view class="webb" src="https://uniapp.dcloud.io/static/web-view.html"></web-view>
    </view>
</template>
<script>
    var wv;
    export default {
   
        data() {
   
            return {
   
            }
        },
        mounted() {
   
            // #ifdef APP-PLUS
                    var currentWebview = this.$parent.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview()
                    setTimeout(function() {
   
                        wv = currentWebview.children()[0]
                        wv.setStyle({
   top:150,height:300})
                    }, 1000); //如果是页面初始化调用时,需要延时一下
                    // #endif
        },
        beforeDestroy() {
   
        },
        methods: {
   
        }
    }
</script>
<style lang="scss">
    .content{
   
        width: 100%;
        height: calc(100vh - var(--status-bar-height) - 45px - 45px - 3px);
    }
    .webb{
   
        margin-top: calc(var(--status-bar-height) + 45px + 45px + 3px);
    }
</style>

上述方法在App端切换时,会出现闪屏现象

解决方法:

动态创建添加webview的方式来加载H5/Html网页,代码如下:

<template>
    <view class="content">
    </view>
</template>
<script>
    var wv;
    export default {
   
        data() {
   
            return {
   
            }
        },
        mounted() {
   
            // #ifdef APP-PLUS
            wv = plus.webview.create("","webview",{
   
                plusrequire:"none", //禁止远程网页使用plus的API,有些使用mui制作的网页可能会监听plus.key,造成关闭页面混乱,可以通过这种方式禁止
                //'uni-app': 'none', //不加载uni-app渲染层框架,避免样式冲突
                top:uni.getSystemInfoSync().statusBarHeight+93 //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的,可以继续降低TOP值
            })
            wv.loadU

你可能感兴趣的:(uni,uni-app,html,javascript)