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

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

前提

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

"custom": true,

自定义导航栏需要设置

"navigationStyle": "custom"

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

filter:blu(10px)

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

backdrop-filter: blur(10px);

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

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

效果