vue版本
<template>
<div class="com-vscroll">
<slot name="mcontent"></slot>
<div class="loadcss">
<img src="https://sta.caotangteach.com/static/com.mianfeinovel/images/common/mianfeinovel_loading.gif" class="loadimg" v-if="loading&&isFullLoad==1">
<div v-if="isFullLoad==1">正在加载更多...</div>
<div v-if="isFullLoad==0">没有更多数据了</div>
</div>
</div>
</template>
<script>
export default {
name: "ComVscroll",
props: {
isFullLoad: {
type: Number,
default:
},
watchCount: {
type: Number,
default:
}
},
data() {
return {
loading: true,
};
},
methods: {
fetchData() {
if (this.loading) {
return;
}
if (this.loading==false) {
this.loading = true;
this.$emit("onPullingUp");
}
},
scrollEventFunc() {
//当打开一个页面，一定会执行这里
var a = document.documentElement.clientHeight || document.body.clientHeight;
var b = document.documentElement.scrollTop || document.body.scrollTop;
var c = document.documentElement.scrollHeight || document.body.scrollHeight;
if (a + b + >= c) {
this.fetchData();
}
}
},
watch: {
watchCount(value) {
//根据上一页的结果，唯一能再次发接口的条件
this.loading = false;
}
},
mounted() {
if (window.addEventListener) {
window.addEventListener("scroll", this.scrollEventFunc, false);
} else if (window.attachEvent) {
window.attachEvent("scroll", this.scrollEventFunc);
}
}
};
</script> <style lang="stylus" scoped>
.com-vscroll {
.loadcss {
display: -webkit-box;
-webkit-box-pack: center;
height: 82px;
line-height: 82px;
font-size: .32rem;
color: #5D646E;
.loadimg {
margin-right: 10px;
margin-top :2px;
height: .32rem;
width: .32rem;
}
}
}
</style>
页面引用的时候：
<ComVscroll @onPullingUp="ClickPullup" :isFullLoad="hasMoreload" :watchCount="watchCount">
<div slot="mcontent">
<div class="page-mid">
<div class="mid-content">
<ComVlist :remenOptions="remenOptions" :hasMidBtn="identity<4" :dlist="Array.from(pageDatas[mtype])" :dadianParams="dadianParams"></ComVlist>
</div>
</div>
</div>
</ComVscroll>
第一次接口由页面的created或者路由监听执行。以后的分页才由scroll执行。
jsp版如下：
loadMore(); //主动执行第一次
function scrollEventFunc() {
var a = document.documentElement.clientHeight || document.body.clientHeight;
var b = document.documentElement.scrollTop || document.body.scrollTop;
var c = document.documentElement.scrollHeight || document.body.scrollHeight;
if (a + b + >= c) {
try { loadMore(); } catch (e) { }
}
}
if (window.addEventListener) {
window.addEventListener("scroll", scrollEventFunc, false);
} else if (window.attachEvent) {
window.attachEvent("scroll", scrollEventFunc);
}
var pageNum = ; //页码
var pageSize = ; //每页加载条数
var lastPage = false; //最后一页
var loading = false; //正在加载
var rankIndex=;
function loadMore(){
if (lastPage) { //已经是最后一页了，不再请求
return;
}
if (loading) { //正在加载
return;
}
loading = true;
pageNum++;
$('.nothing').hide();
$('.loading').show();
if (sextype==) {
var fenpin="man";
}else{
var fenpin="woman";
}
var url = window.J_search.buildAjaxUrl("/aa/aa/aa/list/"+pageSize+"/"+pageNum+"?sex="+fenpin);
$.ajax({
type: 'GET',
url: url,
async: false,
timeout: ,
success: function (returnData) {
if (returnData.respCode == "") {
var dataList=returnData.data;
if (dataList == null || dataList.length == ) {
lastPage = true;
loading = false; //加载结束
$(".nothing").show();
$('.template-207').hide();
return;
}
var cnxhStr='';
if(dataList&&dataList.length>) {
$.each(dataList, function (i, n) {
rankIndex++;
var seriaType=(n.serialStatus == 'SERIALIZE')?"连载中":"已完结";
//判断二级分类是否为空
var label = n.label;
if(label == null || label == ''){
label = '其他';
}
cnxhStr += '<div class="topPart book_top_1 rank' + i + ' getRank" onclick=\'click_Event("' + n.host + '","' + n.bookId + '","' + n.id + '","' + n.bookName + '","' + n.authorName + '","","","0","猜你喜欢","' + (rankIndex) + '")\'><div class="imgBox" ><img src="https://st.quanbennovel.com/static/images/default.png" data-src="' + n.sourceImageUrl + '"></div>';
cnxhStr += '<div class="des"><p class="name">' + n.bookName + ' </p><p class="details"> ' + n.description + '</p><div class="arAndpeo clearfix"><span class="author"> ' + n.authorName + '</span><span class="desLabel"><i class="firstLabel"> ' + label + ' </i></span></div></div></div>';
});
if (sextype==) {
$("#man .cnxh").append(cnxhStr);
}
if (sextype==) {
$("#woman .cnxh").append(cnxhStr);
}
try {
$(document).trigger('ajax:finish', pageNum - ); //处理图片加载失败
} catch (err) { } loading = false; //加载结束
lazyload("container"); //图片懒加载
} }else {
loading = false; //加载结束
return;
}
},
error: function (xhr, type, textStatus) {
loading = false;
}
});
}