移动端双层吸顶

移动端双层吸顶

1、未处理效果

2、已处理效果

3、具体实现

• 使用 vant + vue
• 搜索框跟 tab 标签吸顶
• 固定列表或者内容的高度，用总高度减去搜索框和 tab 标签的高度，并且让列表或者内容在 Y 轴滚动
• 实现代码：

.van-tabs__content {
    height: calc(100vh - 98px);
    overflow-y: scroll;
}

4、vh、vw、calc简单介绍

• vh：相对于视窗的高度, 视窗被均分为100单位的 vh
• vw：相对于视窗的宽度, 视窗被均分为100单位的 vw
• calc 是英文单词 calculate（计算）的缩写，是 css3 的一个新增的功能，能在 css 中计算值的函数，用于动态计算长度值。
• 比如，可以使用 calc() 给元素的 border、margin、padding、font-size 和 width 等属性设置动态值

/* 表示整个浏览器窗口高度减去20px的大小 */
calc(100vh - 20px)
/* 表示整个浏览器窗口宽度减去20px的大小 */
calc(100vw - 20px)

• 注意：
  • 运算符前后都要用空格隔开，必须加单位，例如：height: calc(100vh - 98px);
  • 任何长度值都可以使用calc()函数进行计算
  • calc() 函数支持 “+”、"-"、"*"、"/" 运算
  • calc() 函数使用标准的数学运算优先级规则

如有不足请指正