uniapp设置tabBar高斯模糊并设置tabBar高度占位

1、设置tabBar高斯模糊

2、设置tabBar高度占位

(1)需要先在App.vue中获取一下

复制代码
uni.getSystemInfoSync().windowBottom;  //返回值是tabBar的高度

(2)在全局样式文件/uview-ui/libs/css/style.vue.scss中定义一个全局样式

3、在需要的页面底部,加上一个view,类名设置为u-blur-effect-inset即可

注意:如果设置了高斯模糊而没有设置tabBar高度占位,会造成tabBar遮挡

相关推荐
PedroQue995 小时前
uni-app x工程化实战:从页面堆到可维护架构
前端·uni-app
2501_916008896 小时前
马甲包过审卡在哪?Ipa Guard 能做的和做不到的
android·小程序·https·uni-app·iphone·webview
2501_915921431 天前
iOS应用耗电测试:使用Energy Log、Keymob和Instruments进行性能监控与能源消耗分析
android·ios·小程序·https·uni-app·iphone·webview
行思理1 天前
个推厂商应用开通指南
运维·服务器·uni-app·个推·uni-app push
郑州光合科技余经理1 天前
同城商城源码:商品库和订单库怎么随包交付
android·java·开发语言·后端·uni-app·php·ai编程
肖老师xy1 天前
uniapp实现带展开收起按钮文本多行省略
uni-app
Liu.7741 天前
uniapp swiper 常见问题及修复
前端·uni-app
Liu.7741 天前
uniapp scroll-view 常见问题及修复
uni-app
梦曦i1 天前
Taro vs uni-app:技术路线与选型真相
uni-app·taro
多客:duokelijie1 天前
婚恋交友小程序合规梳理:上线运营需要准备哪些资质与许可手续?
后端·mysql·微信小程序·前端框架·uni-app·php·持续部署