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遮挡

相关推荐
乔冠宇5 小时前
微信小程序修改个人信息头像(uniapp开发)
微信小程序·小程序·uni-app
一个处女座的程序猿O(∩_∩)O9 小时前
Uniapp 开发中遇到的坑与注意事项:全面指南
uni-app
Elena_Lucky_baby9 小时前
uniapp 网络请求封装(uni.request 与 uView-Plus)
uni-app
黑云压城After13 小时前
uniapp小程序自定义日历(签到、补签功能)
小程序·uni-app
烂蜻蜓13 小时前
Uniapp 设计思路全分享
前端·css·vue.js·uni-app·html
Elena_Lucky_baby13 小时前
uniapp封装请求
uni-app
尚学教辅学习资料14 小时前
基于SpringBoot+Vue+uniapp的高校招聘小程序+LW参考示例
spring boot·uni-app·招聘系统
岑梓铭16 小时前
uniapp邪门事件
uni-app
漫天绯羽18 小时前
uniapp 中使用天地图,安卓端、h5
uni-app
尚学教辅学习资料19 小时前
基于SpringBoot+vue+uniapp的智慧旅游小程序+LW示例参考
vue.js·spring boot·uni-app·旅游