0


uniapp调整webview的大小与位置,解决遮挡问题

起因:

uniapp使用webview时默认的是全屏显示

通过fullscreen="false"和webview-styles="style"两个属性可以控制大小,但是依然会挡住顶部的东西,只能以百分比的单位去控制宽高且无法控制位置

解决方案:

众所周知,query.select().boundingClientRect可以获取元素的高度,$getAppWebview可以获取webview实例,uni.getSystemInfoSync()可以获取屏幕高度,因此我们就可以通过控制webview定位来让一些内容显示出来,并且可以修改webview实例的高度,以下是我使用时的示例,仅供参考:

<view class="base_header">
            <mHeader ref="base_header"></mHeader>
        </view>
        <view class="main">
            <view class="bage_close">

                <close color="#000" ref="bage_close"></close>
            </view>

            <web-view :fullscreen="false" src="xxx"></web-view>
        </view>
onMounted(() => {
        const instance = getCurrentInstance();
        const query = uni.createSelectorQuery().in(instance);
        const {
            windowHeight
        } = uni.getSystemInfoSync(); // 屏幕高度(单位:px)
        console.log("屏幕高度:", windowHeight);
        if (instance && instance.proxy) {
            const currentWebview = instance.proxy.$scope?.$getAppWebview();
            if (currentWebview) {
                nextTick(() => {
                    setTimeout(() => {
                        let closeHeight = 0;
                        let baseHeaderHeight = 0;

                        query
                            .select(".base_header")
                            .boundingClientRect((res) => {
                                if (res && res.height) {
                                    baseHeaderHeight = res.height;
                                } else {
                                    baseHeaderHeight = 100; // 默认高度
                                }
                            })
                            .select(".bage_close")
                            .boundingClientRect((res) => {
                                if (res && res.height) {
                                    closeHeight = res.height + 100;
                                } else {
                                    closeHeight = 100; // 默认高度 
                                }
                            })
                            .exec(() => {
                                const totalTop = closeHeight + baseHeaderHeight;
                                console.log("Calculated totalTop:", totalTop);

                                const wv = currentWebview.children()?.[0];
                                if (wv) {
                                    wv.setStyle({
                                        top: `${totalTop}px`,
                                        height: `${windowHeight-totalTop-30}px`,
                                        zIndex: -1,
                                    });
                                }
                            });
                    }, 300);
                });
            }
        }
    });

假设遇见了点击事件问题,记得调整内容的层级(position: relative;z-index: 1000;)

标签: uni-app

本文转载自: https://blog.csdn.net/m0_49083276/article/details/143891585
版权归原作者 printf_824 所有, 如有侵权,请联系我们删除。

“uniapp调整webview的大小与位置,解决遮挡问题”的评论:

还没有评论