项目中经常会遇到列表页, 为了保证用户体验, 我们都会用到上拉加载的技术, 保持用户体验, 如何判断页面滑到了屏幕最底部是较为关键的一步: 具体实现:
mounted 中监听:
- mounted () {
- Windows.addEventListener('scroll', this.scroll, false) // 监听 (绑定) 滚轮滚动事件
- },
methods 中声明方法:
- scroll () {
- let clientHeight = document.documentElement.clientHeight || document.body.clientHeight
- // 设备 / 屏幕高度
- let scrollObj = document.querySelector('#surface') // 滚动区域
- let scrollTop = Windows.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
- let scrollheight = scrollObj.scrollHeight // 滚动条的总高度
- if (scrollTop + clientHeight == scrollheight) { // div 到头部的距离 + 屏幕高度 = 可滚动的总高度
- // 当页面滑到了屏幕最底部要做的操作
- }
- },
来源: http://www.bubuko.com/infodetail-3364056.html