一、html和css
可視區(qū)固定500px店茶，設(shè)置overflow-y: auto 來實(shí)現(xiàn)滾動(dòng)。
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
二两嘴、實(shí)現(xiàn)思路
image.png
觸發(fā)的條件是： 可視高度 + 滾動(dòng)距離 >= 實(shí)際高度段直。例子我會(huì)使用vue來實(shí)現(xiàn)，和原生實(shí)現(xiàn)是一樣的溶诞。
- 可視高度(offsetHeight)：通過 dom 的
offsetHeight獲得，表示區(qū)域固定的高度决侈。這里我推薦通過getBoundingClientRect()來獲取高度螺垢，因?yàn)槭褂们罢邥?huì)引起瀏覽器回流，造成一些性能問題赖歌。 - 滾動(dòng)高度
(scrollTop)：滾動(dòng)事件中通過e.target.scrollTop獲取枉圃，表示滾動(dòng)條距離頂部的px - 實(shí)際高度(
scrollHeight)：通過dom 的 scrollHeight獲得，表示區(qū)域內(nèi)所有內(nèi)容的高度（包括滾動(dòng)距離）庐冯，也就是實(shí)際高度
2.1孽亲、基礎(chǔ)實(shí)現(xiàn)
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、添加距離底部多少距離觸發(fā)
現(xiàn)在我們希望是離底部一定距離就觸發(fā)事件展父，而不是等到完全觸底返劲。如果你做過小程序，這和onReachBottom差不多的意思栖茉。
聲明一個(gè)離底部的距離變量reachBottomDistance
這時(shí)候觸發(fā)條件：
可視高度 + 滾動(dòng)距離 + reachBottomDistance >= 實(shí)際高度
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篮绿、再次優(yōu)化
在距離底部100px時(shí)成功觸發(fā)事件，但由于100px往下的區(qū)域是符合條件的吕漂，會(huì)導(dǎo)致一直觸發(fā)亲配，這不是我們想要的。
接下來做一些處理，讓其進(jìn)入后只觸發(fā)一次:
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吼虎、最終優(yōu)化
實(shí)時(shí)去獲取位置信息稍微會(huì)損耗性能犬钢，我們應(yīng)該把不變的緩存起來，只實(shí)時(shí)獲取可變的部分
export default {
data(){
return {
flag: true,
reachBottomDistance: 100
offsetHeight: 0,
}
},
mounted(){
// 頁面加載完成后 將可視區(qū)高度存儲(chǔ)起來
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
}
}
}
}
三思灰、利用觸底事件實(shí)現(xiàn)滾動(dòng)分頁加載
<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,
// 展示區(qū)list
showList: [],
pageIndex: 1,
pageSize: 20,
totalPage: 0,
status: 'nomore'
};
},
mounted () {
// 頁面加載完成后 將可視區(qū)高度存儲(chǔ)起來
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';
//如果還有更多重新設(shè)置flag為true
this.flag = true
} else {
this.status = 'nomore';
//沒有更多flag設(shè)置為false不在執(zhí)行觸底加載
this.flag = false
}
});
}
}
}
</script>
<style lang='scss' scoped>
.scroll {
overflow: auto;
height: 500px;
.crad {
height: 200px;
margin-top: 10px;
background-color: red;
}
}
</style>
