准备工作vue官方文档 介绍 — Vue.js
<script src="https://fastly.jsdelivr.net/npm/vue@2"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/axios"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<style>
*{padding:0;margin:0;border: 0;}
ul li{height:100px;border:1px solid #000;margin:15px auto;text-align: center;}
.loading{background:#fff;position: fixed;right:0;top:0;width:100%;height:100%}
.loading img{display: block;width:30%;height:auto;margin:50% auto}
</style>
<title></title>
</head>
<body>
<div id="app" >
<div v-if="loading" class="loading"><img src="images/load.png"></div>
<ul>
<li v-for="(item,index) in pageData" :key="index"> {{item.name}} </li>
</ul>
</div>
</body>
</html>
vue2 通过监听默认滚动条事件来加载下一页数据
<script>
Vue.config.productionTip = false //关闭开发版提示
new Vue({
el: '#app',
data: function() {
return {
loading:true, //loading
pageData:[],//接口返回列表数据
totalpage:'',//总页数
params:{//传给接口的参数
page: 1 ,
pcount:15
},
}
},
mounted() {
this.getPage(this.params)//数据
window.addEventListener('scroll', this.windowScroll,true)//监听滚动条事件
},
methods: {
//请求接口方法 常规的ajax方式(用这种需要引用jquery)
getPage(params){
$.ajax({
url:'接口地址',
headers:{'Content-Type':'application/x-www-form-urlencoded'},
data:params,
type: 'POST',
dataType: 'JSON',
success: res => {
this.loading = false
if(res.status == 200 ){
//接口没有返回总页数，所以这里自己计算 总页数= 数据总数 / 每页数量（比如一页15条）
this.totalpage = Math.ceil(res.data.count / params.pcount);
if(res.data.count == 0){
console.log('无数据 处理逻辑')
}else{
if(this.totalpage >= params.pcount){
console.log('加载下一页')
let listData = this.pageData.concat(res.data.list);
// console.log('listData',listData)
this.pageData=listData
this.params.page += 1;
}else{
console.log('不够一页')
this.pageData=res.data.list
}
//加载数据可以触发
this.isRefreshLock=true
}
}else{
console.log('200以外的情况 处理逻辑')
}
},
})
}
//用axios这种方式也可以 ，这种不用在引用jquery
// async getApiData (params) {
// const headers = {
// headers:{
// 'token':123,
// }
// }
// await axios.post('接口地址'
// ,参数,headers)
// .then((res) => {
// console.log('res',res)
// })
// },
//滚动条事件
windowScroll(e) {
//滚动条滚动时距离顶部的距离
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//可视区的高度
let windowHeight =
document.documentElement.clientHeight || document.body.clientHeight;
//滚动条的总高度
let scrollHeight =
document.documentElement.scrollHeight || document.body.scrollHeight;
//滚动条到底部的条件
// console.log(scrollTop + windowHeight + "--" + scrollHeight);
if ( scrollTop + windowHeight >= scrollHeight - 200 && this.isRefreshLock) {
if(this.totalpage >= this.params.page){
// false防止多次触发加载数据
this.isRefreshLock = false;
this.getPage(this.params)
}else{
console.log('没有更多数据了')
}
}
},
},
beforeDestroy() {
console.log('beforeDestroy')
//销毁页面时移除监听事件
window.removeEventListener('scroll', this.windowScroll)
}
})
</script>
vue3通过监听滚动条方式分页
html部分和2的一样这里就不贴代码了，只贴js部分
<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/axios"></script>
<script type="text/javascript">
const { createApp, reactive, toRefs, ref, watch, onMounted ,onBeforeMount} = Vue;
const app = createApp({
setup() {
const params=ref({page:1,pcount:15})//接口需要的参数
const list=ref([])//列表数据
const totalpage =ref(0)//总页码
const loading=ref(false)//页面加载loading
const isRefreshLock=ref(false)//防止触底重复触发
onMounted(() => {
getApiData(params.value)//调用请求接口方法
window.addEventListener('scroll', windowScroll, true)//监听滚动条
}),
const getApiData = async(params2) => {
await axios.post('接口地址', params2).then((res) => {
console.log('res',res)
if(res.status == 200 ){
//接口没有返回总页数，所以这里自己计算 总页数= 数据总数 / 每页数量（比如一页15条）
totalpage.value = Math.ceil(res.data.count / params.pcount);
if(res.data.count == 0){
console.log('无数据 处理逻辑')
}else{
if(totalpage.value >= params2.page){
console.log('加载下一页')
list.value=[...list.value,...res.data.data.list]
// console.log('list.value',list.value)
// console.log(params.value)
loading.value = true
//加载数据可以触发
isRefreshLock.value=true
//返回数据后页码加一
params.value.page +=1
}else{
console.log('不够一页')
list.value=res.data.data.list
}
//加载数据可以触发
this.isRefreshLock=true
}
}else{
console.log('200以外的情况 处理逻辑')
}
})
},
const windowScroll= (e) =>{
// console.log(e)
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//可视区的高度
let windowHeight =
document.documentElement.clientHeight || document.body.clientHeight;
//滚动条的总高度
let scrollHeight =
document.documentElement.scrollHeight || document.body.scrollHeight;
//滚动条到底部的条件
//console.log(scrollTop ,'=======', windowHeight + "--" + scrollHeight);
if ( scrollTop + windowHeight >= scrollHeight - 200 && isRefreshLock.value == true) {
if(totalpage.value >= params.value.page){
// false防止多次触发加载数据
isRefreshLock.value = false;
getApiData(params.value)
}else{
console.log('没有更多数据了')
}
}
},
return{
params,
totalpage,
list,
loading,
},
}
})
app.mount("#app");
</script>
