欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
情景分析:
 
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: {
 
       //计算页面高度
 
        getTableHeight() {
 
            this.tableHeight = this.getTableHeight();
 
            this.tableHeight = this.tableHeight - this.freeTableHeight;
 
        },
 
        //获取减去除table表单页其余的高度值
 
        getTableHeight() {
 
             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;
 
        }
 
    }

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64204.shtml