分页组件vue和jsp版本

<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: 0 ?????}, ?????watchCount: { ???????type: Number, ???????default: 0 ?????} ???}, ???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 + 300 >= 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: 0.32rem; ???color: #5D646E; ???.loadimg { ?????margin-right: 10px; ?????margin-top :2px; ?????height: 0.32rem; ?????width: 0.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>

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 + 300 >= c) { ???????????try { ???????????????????????????????loadMore(); ???????????????????????????} catch (e) { ???????????} ???????} ???} ???if (window.addEventListener) { ???????window.addEventListener("scroll", scrollEventFunc, false); ???} else if (window.attachEvent) { ???????window.attachEvent("scroll", scrollEventFunc); ???} ???var pageNum = 0; //页码 ???var pageSize = 10; //每页加载条数 ???var lastPage = false; //最后一页 ???var loading = false; //正在加载 ???var rankIndex=0; ???function loadMore(){ ???????if (lastPage) { //已经是最后一页了，不再请求 ???????????return; ???????} ???????if (loading) { //正在加载 ???????????return; ???????} ???????loading = true; ???????pageNum++; ???????$(‘.nothing‘).hide(); ???????$(‘.loading‘).show(); ???????if (sextype==1) { ???????????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: 10000, ???????????success: function (returnData) { ???????????????if (returnData.respCode == "20000") { ???????????????????var dataList=returnData.data; ???????????????????if (dataList == null || dataList.length == 0) { ???????????????????????lastPage = true; ???????????????????????loading = false; //加载结束 ???????????????????????$(".nothing").show(); ???????????????????????$(‘.template-207‘).hide(); ???????????????????????return; ???????????????????} ???????????????????var cnxhStr=‘‘; ???????????????????if(dataList&&dataList.length>0) { ???????????????????????$.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==1) { ???????????????????????????$("#man .cnxh").append(cnxhStr); ???????????????????????} ???????????????????????if (sextype==2) { ???????????????????????????$("#woman .cnxh").append(cnxhStr); ???????????????????????} ???????????????????????try { ???????????????????????????$(document).trigger(‘ajax:finish‘, pageNum - 1); //处理图片加载失败 ???????????????????????} catch (err) { ???????????????????????} ???????????????????????loading = false; //加载结束 ???????????????????????lazyload("container"); //图片懒加载 ???????????????????} ???????????????}else { ???????????????????loading = false; //加载结束 ???????????????????return; ???????????????} ???????????}, ???????????error: function (xhr, type, textStatus) { ???????????????loading = false; ???????????} ???????}); ???}