1.实现效果
![](https://i-blog.csdnimg.cn/blog_migrate/5002ad3600ad1ab918ebe87ccbdf60fd.gif)
2.实现原理
2.1 引入阿里巴巴矢量图标
可参考文章:微信小程序引入外部icon(阿里巴巴矢量图标)[1]^{[1]}[1]
2.2 css函数var
css的var函数[2]^{[2]}[2]:var() 函数用于插入自定义的属性值,如果一个属性值在多处被使用,该方法就很有用。
语法:
var(custom-property-name, value)
值 | 描述 |
---|---|
custom-property-name | 必需。自定义属性的名称,必需以 – 开头。 |
value | 可选。备用值,在属性不存在的时候使用。 |
eg:
page {--color: #222;background: var(--color);--bg: orange;--w: 175rpx;
}
2.3 ios底部安全距离
苹果官方推荐:使用env(),constant()来进行底部安全距离适配。
iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义