vue实现移动端下拉加载的功能
第一种方法，兼容性较好，监听scroll方法，但需要做下节流。
思路：监听window.scroll方法，判断clientHeight+scrollTop>scrollHeight的临界条件，也就是滚动条是否到底（为什么这个等式能达到临界条件，请看我的上一篇文章juejin.cn/post/685041…）
<template>
<div class="main">
<ul>
<li class="item" v-for="(item, index) in totalList" :key="index">
<h2 class="item-name">
{{ item.name }}
</h2>
<h3 class="item-email">
{{ item.email }}
</h3>
</li>
</ul>
<div class="gif">
<img src="./assets/loading.gif" width="20px" height="20px" />
</div>
</div>
</template>
<script>
import Axios from "axios";
export default {
name: "app",
data() {
return {
number: 1,
totalList: [],
};
},
created() {
window.addEventListener("scroll", this.throttling(this.onScrollFunc, 100));
this.getData();
},
methods: {
getData() {
Axios.get(
`https://jsonplaceholder.typicode.com/comments?postId=${this.number}`
).then((res) => {
console.log(res.data);
this.totalList = this.totalList.concat(res.data);
});
},
onScrollFunc: function() {
let clientHeight = document.documentElement.clientHeight;
let scrollTop = document.documentElement.scrollTop;
let scrollHeight = document.documentElement.scrollHeight - 10;
if (clientHeight + scrollTop > scrollHeight) {
this.number++;
this.getData();
console.log("----");
}
},
throttling: function(fn, time) {
let startTime = Date.parse(new Date());
return function() {
var cureTime = Date.parse(new Date());
if (cureTime - startTime >= time) {
fn();
startTime = cureTime;
}
};
},
},
};
</script>
<style lang="less">
* {
margin: 0;
padding: 0;
}
.item {
height: 200px;
border: 1px solid red;
border-radius: 10px;
box-sizing: border-box;
margin: 10px;
list-style: none;
text-align: center;
padding: 40px 0;
}
.gif {
text-align: center;
}
</style>
第二种方法，使用intersectionObserver方法判断某元素是否在可视区域里，兼容性不好，不适配IE
**思路：**监听loading这个模块是否出现在可视区域里面了，如果出现了，说明滚动条到底，并且没有内容了。
<template>
<div id="app">
<ul>
<li class="item" v-for="(item, index) in totalList" :key="index">
<div class="title">{{ item.name }}</div>
<div class="content">{{ item.body }}</div>
</li>
</ul>
<div class="load" ref="load">
加载中...
</div>
</div>
</template>
<script>
import Axios from "axios";
export default {
name: "app",
data() {
return {
number: 1,
totalList: [],
};
},
created() {
this.getData();
this.$nextTick(()=>{
this.interSectionFun();
})
},
mounted() {
},
methods: {
getData() {
Axios.get(
`https://jsonplaceholder.typicode.com/comments?postId=${this.number}`
).then((res) => {
console.log(res.data);
this.totalList = this.totalList.concat(res.data);
});
},
interSectionFun() {
var intersectionObserver = new IntersectionObserver((entries) => {
if (entries[0].intersectionRatio <= 0) return;
this.number++;
this.getData();
});
intersectionObserver.observe(this.$refs.load);
},
},
};
</script>
<style lang="less">
* {
margin: 0;
padding: 0;
}
.item {
list-style: none;
border: 1px solid red;
margin: 20px;
height: 400px;
}
</style>
