微信小程序如何自定义tabBar 导航栏高斯模糊毛玻璃特效

为什么不尝试把喜欢的人追到手,你在害怕什么?怕输你就永远赢不了,不上台你就永远是观众,不要在风华正茂的年纪里给自己留下遗憾

微信小程序如何自定义tabBar 导航栏高斯模糊毛玻璃特效

前提

微信小程序自定义tabBar需要在app.json中开启

"custom": true,

且需要配置custom-tab-bar可阅读:《解决原生小程序custom(getTabBar接口)自定义tabBar导航高亮需点击两次

自定义导航栏需要设置

"navigationStyle": "custom"

当然高斯模糊毛玻璃特效也不限制于此

误区

filter

filter:blu(10px)

filter它是对目前所在的view做高斯模糊,若要用它实现类似ios的高斯模糊则需要在添加新的view定位叠加,之前枫瑞一直使用该方式,虽然也可以实现但比较繁琐《CSS3 filter(滤镜) 制作图片高斯模糊无需JS

微信小程序如何自定义tabBar 导航栏高斯模糊毛玻璃特效 1

正确

backdrop-filter

backdrop-filter: blur(10px);

backdrop-filter是一个正确方式,它是将该背景内容做高斯模糊(也就是说明使用它的时候该view需要一个透明度)

backdrop-filter: blur(10px);
background-color: rgb(0 0 0 / .64);

效果

微信小程序如何自定义tabBar 导航栏高斯模糊毛玻璃特效
(2)
上一篇 01/17/2022
下一篇 02/16/2022

相关推荐

发表评论

您的电子邮箱地址不会被公开。

评论列表(1条)

  • izharBegim 
    izharBegim  02/14/2022

    试试

星宿UI 官方文档上线:https://xs.frbkw.com/ 
自己画的banner插画开源下载:https://banner.frbkw.com/