UniApp开发Android全面屏让底部导航栏透明

使用UniApp开发安卓的程序的时候,全面屏的手机的底部导航栏,默认不是透明的,而是带颜色的背景。一般设置成和背景色一样的颜色,假装它是透明的。

从上图可以看出,底部的NavigationBar背景是个白色的,和中间的灰色背景对比还是比较明显的。这种页面内容不多,不会达到底部,或者底部带TabBar的会不是很影响使用。

但是当页面内容多的时候,能够超过底部,就会看起来会特别奇怪,它的背景会遮盖页面内容。所以想设置为彻底透明的。

设置透明的代码如下:

if(uni.getSystemInfoSync().platform === 'android'){
	var Color = plus.android.importClass("android.graphics.Color");   
	var WindowManager = plus.android.importClass("android.view.WindowManager");
	var Build = plus.android.importClass("android.os.Build");
	plus.android.importClass("android.view.Window");
	var mainActivity = plus.android.runtimeMainActivity();
	var window_android = mainActivity.getWindow();
	if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
		window_android.setNavigationBarContrastEnforced(false);
	}
	if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
		window_android.setNavigationBarColor(Color.TRANSPARENT);
	}
	if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
		if ((window_android.getAttributes().flags & WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION) == 0) {
		    window_android.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
		}
	}
}

 调用Native.js使用原生的代码去实现的。设置一下就好了。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于uniapp开发的小程序,你可以通过以下步骤来实现滚动页面时顶部导航栏的透明变白色: 1. 在App.vue中设置全局的顶部导航栏样式: ```css <style> .nav-bar { background-color: transparent; color: #ffffff; } </style> ``` 2. 在每个页面的.vue文件中,监听滚动事件并动态修改顶部导航栏的样式: ```html <template> <view> <!-- 这里是页面内容 --> </view> </template> <script> export default { onScroll(e) { // 获取滚动距离scrollTop const scrollTop = e.detail.scrollTop; // 设置滚动距离阈值,超过该值则将导航栏背景颜色设为白色,否则设为透明 const threshold = 100; // 获取导航栏节点 const navBar = uni.createSelectorQuery().select('.nav-bar'); if (scrollTop > threshold) { navBar.css('background-color', '#ffffff'); navBar.css('color', '#000000'); } else { navBar.css('background-color', 'transparent'); navBar.css('color', '#ffffff'); } }, onPageScroll(e) { this.onScroll(e); }, onReachBottom() { // 页面滚动到底部的时候触发加载更多 } } </script> <style> /* 这里是页面样式 */ </style> ``` 在上述代码中,通过监听页面滚动事件`onPageScroll`和调用`onScroll`方法来实现改变导航栏样式的效果。根据滚动距离设置导航栏的背景颜色,当滚动距离超过阈值时,将导航栏背景颜色设为白色,否则设为透明。请注意,需要将`.nav-bar`替换为你实际使用的顶部导航栏的class或id。 这样就可以实现滚动页面时顶部导航栏的透明变白色的效果了。希望能对你有所帮助!如有更多问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值