ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

[绍棠] uni-app打包APP如何让<web-view>腾出statusBar高度

2021-03-03 13:34:00  阅读:268  来源: 互联网

标签:web 绍棠 statusBar currentWebview wv plus uni webview 页面


问题

<web-view>如果设了"navigationStyle" : "custom"会自动充满全部屏幕,现在,如果想在页面上面腾出statusBar高度,该怎么做?

不可行方案

CSS方案全部不可行。

可行方案一

<template>
	<view class="container">
		<web-view :src="href"></web-view>
	</view>
</template>
		onLoad() {
			var currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
			setTimeout(function() {
				var wv = currentWebview.children()[0];
				wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度,单位为px
					top: plus.navigator.getStatusbarHeight(), //此处是距离顶部的高度,应该是你页面的头部
					height: uni.getSystemInfoSync().windowHeight - plus.navigator.getStatusbarHeight(), //webview的高度
					scalable: false //webview的页面是否可以缩放,双指放大缩小
				})
			}, 1000); //如页面初始化调用需要写延迟
		},

 

可行方案二

  1. 不要使用<web-view>标签,而是使用JS编程方式。

  2. 必须使用APP-PLUS。

 

<template>
    <view>
    </view>
</template>

script:

 


    export default {
        onl oad() {
            // #ifdef APP-PLUS
            var wv = plus.webview.create("http://xxx", "custom-webview", {
                plusrequire: "none", //禁止远程网页使用plus的API,有些使用mui制作的网页可能会监听plus.key,造成关闭页面混乱,可以通过这种方式禁止
                'uni-app': 'none', //不加载uni-app渲染层框架,避免样式冲突
                top: uni.getSystemInfoSync().statusBarHeight ,//放置在titleNView下方。如果还想在webview上方加个地址栏的什么的,可以继续降低TOP值
                height: uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight
            })
            var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview()
            currentWebview.append(wv); //一定要append到当前的页面里!!!才能跟随当前页面一起做动画,一起关闭
            // #endif
        }
    }


 

标签:web,绍棠,statusBar,currentWebview,wv,plus,uni,webview,页面
来源: https://blog.csdn.net/happyshaotang2/article/details/114309319

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有