uniapp之Web-view遮挡导航方案

方案一：pages.json定义原生导航

{  

        "path": "pages/checkout/checkout",  

        "style": {  

            "app-plus": {  

                "navigationBarTitleText": "个人中心",  

                "titleNView": {  

                    "autoBackButton": false,  

                    "buttons": [{  

                        "float": "left",  

                        "type": "back"  

                    }]  

                }  

            }  

        }  

    },

方案二：API使用getAppWebview、getSystemInfo调整webview高度

onLoad() {
	let height = 0; //定义动态的高度变量
	let statusbar = 0; // 动态状态栏高度
	uni.getSystemInfo({ // 获取当前设备的具体信息
		success: (sysinfo) => {
			statusbar = sysinfo.statusBarHeight;
			height = sysinfo.windowHeight;
		}
	});
	let currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
	setTimeout(function() {
		var wv = currentWebview.children()[0];
		wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度，单位为px
			top: statusbar, //此处是距离顶部的高度，应该是你页面的头部
			height: height, //webview的高度
		})
	}, 200); //如页面初始化调用需要写延迟
}

最后

以上就是谨慎秀发为你收集整理的uniapp之Web-view遮挡导航方案的全部内容，希望文章能够帮你解决uniapp之Web-view遮挡导航方案所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。