php手机底部加载分页,实现分页组件悬浮在页面底部

已经实现了，分享下方法。

整体思路是 :

获取窗口高度，再获取table高度。如果table的高度>(窗口高度 - 上边导航栏的高度)那说明数据超出屏幕，则将分页器绝对定位到底部，否则跟随table底部即可。

详细步骤如下：

第一步 ：document.documentElement.clientHeight 获取浏览器整体的高度。

这里要注意：我用的vue，所以在mounted中 用onresize监听窗口变化

window.onresize = () => {

return (() => {

window.fullHeight = document.documentElement.clientHeight

_this.fullHeight = window.fullHeight

_this.setPaginationStyle()

})()

}

第二步 ：给你的table定义一个ref属性，this.$refs.myTable.$el.clientHeight 拿到table的高度。

这里要注意下 this.$refs.myTable.$el.clientHeight拿到的高度是数据填充之前获取到的(这里坑了我小半天)，所以我在vue的updated钩子函数中再次获取一次。具体方法如下：

/**

* 设置分页位置的方法

*/

setPaginationStyle:function () {

console.log('myTable',this.$refs.myTable)

console.log('clientHeight',this.$refs.myTable.$el.offsetHeight)

console.log('fullHeight',this.fullHeight)

//浏览器高度小于 704 直接定位到底部

if(this.fullHeight < 704){

this.paginationStyle = 'background-color: white;position: fixed;bottom: 0; width: 100%; z-index: 100;'

this.myTableStyle = 'margin-bottom:35px'

}else {

//table宽度小于 浏览器高度 - (面包屑 + 导航栏的高度)说明需要固定位置

if(this.$refs.myTable.$el.clientHeight < this.fullHeight - 320 ){

this.paginationStyle = 'background-color: white'

this.myTableStyle = 'margin-bottom:0px'

}else {

this.paginationStyle = 'background-color: white;position: fixed;bottom: 0; width: 100%; z-index: 100;'

this.myTableStyle = 'margin-bottom:35px'

}

}

}