一、html和css
可视区固定500px，设置overflow-y: auto 来实现滚动。
1.1、html
<template>
<div class="scroll"
ref='scroll'
@scroll="onScroll">
<div class="crad"
v-for="i in 10"
:key="i"></div>
</div>
</template>
1.2、css
<style lang='scss' scoped>
.scroll {
overflow: auto;
height: 500px;
.crad {
height: 200px;
margin-top: 10px;
background-color: red;
}
}
</style>
1.3、效果如下
image.png
二、实现思路
image.png
触发的条件是： 可视高度 + 滚动距离 >= 实际高度。例子我会使用vue来实现，和原生实现是一样的。
- 可视高度(offsetHeight)：通过 dom 的
offsetHeight获得，表示区域固定的高度。这里我推荐通过getBoundingClientRect()来获取高度，因为使用前者会引起浏览器回流，造成一些性能问题。 - 滚动高度
(scrollTop)：滚动事件中通过e.target.scrollTop获取，表示滚动条距离顶部的px - 实际高度(
scrollHeight)：通过dom 的 scrollHeight获得，表示区域内所有内容的高度（包括滚动距离），也就是实际高度
2.1、基础实现
onScroll(e) {
let scrollTop = e.target.scrollTop
let scrollHeight = e.target.scrollHeight
let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height)
let currentHeight = scrollTop + offsetHeight
if (currentHeight >= scrollHeight) {
console.log('触底')
}
}
2.2、添加距离底部多少距离触发
现在我们希望是离底部一定距离就触发事件，而不是等到完全触底。如果你做过小程序，这和onReachBottom差不多的意思。
声明一个离底部的距离变量reachBottomDistance
这时候触发条件：
可视高度 + 滚动距离 + reachBottomDistance >= 实际高度
export default {
data(){
return {
reachBottomDistance: 100
}
},
methods: {
onScroll(e) {
let scrollTop = e.target.scrollTop
let scrollHeight = e.target.scrollHeight
let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height)
let currentHeight = scrollTop + offsetHeight + this.reachBottomDistance
if (currentHeight >= scrollHeight) {
console.log('触底')
}
}
}
}
2.3、再次优化
在距离底部100px时成功触发事件，但由于100px往下的区域是符合条件的，会导致一直触发，这不是我们想要的。
接下来做一些处理，让其进入后只触发一次:
export default {
data(){
return {
flag: true,
reachBottomDistance: 100
}
},
methods: {
onScroll(e) {
let scrollTop = e.target.scrollTop
let scrollHeight = e.target.scrollHeight
let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height)
let currentHeight = scrollTop + offsetHeight + this.reachBottomDistance
if (currentHeight >= scrollHeight && this.flag) {
console.log('触底')
this.flag = false
}
}
}
}
2.4、最终优化
实时去获取位置信息稍微会损耗性能，我们应该把不变的缓存起来，只实时获取可变的部分
export default {
data(){
return {
flag: true,
reachBottomDistance: 100
offsetHeight: 0,
}
},
mounted(){
// 页面加载完成后 将可视区高度存储起来
let dom = this.$refs['scroll']
this.offsetHeight = Math.ceil(dom.getBoundingClientRect().height)
},
methods: {
onScroll(e) {
let scrollTop = e.target.scrollTop
let scrollHeight = e.target.scrollHeight
let currentHeight = scrollTop + this.offsetHeight + this.reachBottomDistance
if (currentHeight >= scrollHeight && this.flag) {
console.log('触底')
this.flag = false
}
}
}
}
三、利用触底事件实现滚动分页加载
<template>
<div class="scroll"
ref='scroll'
@scroll="onScroll">
<div class="crad"
v-for="item in showList"
:key='item.id'></div>
<p v-show="status=='loading'">加载中</p>
<p v-show="status=='nomore'">没有更多了</p>
</div>
</template>
<script>
import { fetchList } from '@/api/index';
export default {
data () {
return {
flag: true,
reachBottomDistance: 100,
offsetHeight: 0,
// 展示区list
showList: [],
pageIndex: 1,
pageSize: 20,
totalPage: 0,
status: 'nomore'
};
},
mounted () {
// 页面加载完成后 将可视区高度存储起来
let dom = this.$refs['scroll']
this.offsetHeight = Math.ceil(dom.getBoundingClientRect().height)
this.getDataList()
},
methods: {
onScroll(e) {
let scrollTop = e.target.scrollTop
let scrollHeight = e.target.scrollHeight
let currentHeight = scrollTop + this.offsetHeight + this.reachBottomDistance
if (currentHeight >= scrollHeight && this.flag) {
console.log('触底')
this.flag = false
this.pageIndex++;
this.getDataList();
}
},
getDataList () {
fetchList({ current: this.pageIndex, size: this.pageSize }).then((res) => {
let list = res.data.data.list;
this.totalPage = res.data.data.totalPage;
this.showList = this.showList.concat(list);
if (this.totalPage > this.showList.length) {
this.status = 'loading';
//如果还有更多重新设置flag为true
this.flag = true
} else {
this.status = 'nomore';
//没有更多flag设置为false不在执行触底加载
this.flag = false
}
});
}
}
}
</script>
<style lang='scss' scoped>
.scroll {
overflow: auto;
height: 500px;
.crad {
height: 200px;
margin-top: 10px;
background-color: red;
}
}
</style>
