情景分析:
1. 有一个普通列表页,页面滚动时表头不会固定,向上滚动表头会被遮住,体验极差;
2. 比如有搜索栏,页面滚动条让搜索栏也被滚动,滑到页面后半部分就不能搜索了,要滚到页面顶部才可以看到搜索框,输入搜索。
大致如下图所示:
将页面尺寸变小时:
将页面尺寸变大时:
解决方法:
- 给table设置属性 :max-height="tableHeight"
- 根据获取浏览器高度 - 页面固定的部分高度 = tableHight
- 添加resize事件,监听页面
具体代码:
import variables from '@/assets/styles/variables.scss';
//variables 里已经定义好了页面上的nav高度、搜索栏高度、bodypadding、margin变量,直接引入计算即可
mounted() {
this.$nextTick(() => {
this.getTableHeight();
});
window.addEventListener('resize', this.getTableHeight);
},
beforeDestroy() {
window.removeEventListener('resize', this.getTableHeight);
//一定记得在页面关闭前销毁监听的resize事件,不然多次刷新后页面会因为内存泄漏崩溃
},
methods: {
//计算页面高度,freeTableHeight是你这个列表页除去导航栏、分页等固定高度外的自由高度。比如你的搜索框,是100px,就 - 100px,如果还有其他的,以此类推
getTableHeight() {
this.tableHeight = this.getAnotherElememtHeight();
this.tableHeight = this.tableHeight - this.freeTableHeight;
},
//获取减去除table表单页其余的高度值
getAnotherElememtHeight() {
let computedArr = [
variables.appHeaderNavHeight,
variables.appContentOperatorHeight,
variables.appContentMargin,
variables.appContentPadding,
variables.baseFormSmallHeight,
variables.appContentListOperatorMarginBottom,
variables.appPaginationMarginTop,
variables.baseFormSmallHeight,
variables.appContentPadding,
variables.appContentMargin,
8
];
//将不是数值的例如10px 转为 10,相加
let computedHeight = computedArr.reduce(function(itemA, itemB) {
return parseInt(itemA) + parseInt(itemB);
}, 0);
return window.innerHeight - computedHeight;
}
}