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;
}
});
}

分页组件vue和jsp版本的更多相关文章

  1. 基于avalon1.4.x ----分页组件编写

    avalon分页组件 (1.4.x版本) 随着avalon2的推出,avalon1的官网已经不再维护了,现在似乎是找不到avalon 1.4版本的官方文档了,所以本文章所有的内容均不保证正确性,只能保 ...

  2. 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

  3. 基于Vue.js的表格分页组件

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...

  4. 基于Vue封装分页组件

    使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...

  5. Vue.js的表格分页组件

    转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...

  6. vue分页组件table-pagebar

    之前一直接触都是原始的前端模型,jquery+bootstrap,冗杂的dom操作,繁琐的更新绑定.接触vue后,对前端MVVM框架有了全新的认识.本文是基于webpack+vue构建,由于之前的工作 ...

  7. asp.mvc中的vue分页实例,分页组件无法重置reload,解决点击查询按钮后,分页不刷新的问题

    刚刚接触Vue.js,现在需要做一个查询功能,并且进行服务端分页.主要思路是在页面中注册一个分页组件,然后进行调用.代码如下 1.引用vue.js,具体去网上下载 2.在html的body中添加如下代 ...

  8. 基于 bootstrap 的 vue 分页组件

    申手党点这里下载示例 基于 bootstrap 的 vue 分页组件,我想会有那么一部分同学,在使用Vue的时候不使用单文件组件,因为不架设 NodeJS 服务端.那么网上流传的 *.vue 的各种分 ...

  9. Vue 2.0 pagination分页组件

    最近写了一个分页组件,效果如下图: f-pagination.js文件 Vue.component('f-pagination',{ template:'<div class="fPa ...

随机推荐

  1. LightOj1285 - Drawing Simple Polygon(连接多边形各点)

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1285 题意:给你一些点,然后把它们用一条线把它们连起来,构成一个多边形,不能有相交,必 ...

  2. 运行yum报错Error: Cannot retrieve metalink for reposit

    http://www.netpc.com.cn/593.html 运行yum报错Error: Cannot retrieve metalink for reposit 今天给Centos通过rpm - ...

  3. 使用 Gradle 插件进行代码分析(转)

    代码分析在大多数项目中通常是作为最后一个步骤(如果做了的话)完成的.其通常难以配置及与现有代码整合. 本文旨在勾勒出使用 Gradle 整合 PMD 与 FindBugs 的步骤,并将其与一个现有的 ...

  4. Java连接kafka

    1.maven依赖: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://ww ...

  5. Oracle行列转换case when then方法案例

    select (select name from t_area where id=areaid) 区域, end) 一月, end) 二月, end) 三月, end) 四月, end) 五月, en ...

  6. 51Nod1231 记分牌 动态规划

    原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1231.html 题目传送门 - 51Nod1231 题意 题解 显然是一个竞赛图相关的题. 我们首先 ...

  7. iOS - UnitTests 单元测试

    1.UnitTests 在计算机编程中,单元测试(又称为模块测试, Unit Testing)是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作.程序单元是应用的最小可测试部件.在过程化编 ...

  8. C#不能捕捉的异常,如AccessViolationException

    在.net的异常机制中,有部分严重的编程错误(系统的某些Corrupted State Exceptions异常)是默认不被用户使用常规的异常捕捉方式捕捉到的. 微软的这种设计方式,是让用户必须处理该 ...

  9. DDD学习笔记(一)

    最近开始筹备一个电商项目. 其实是公司的老本行了. 但今年公司希望在做项目的同时, 沉淀出一套针对电商的基础产品. 这样可以提高新项目的开发效率, 减少重复劳动. 那现如今, DDD(领域驱动设计)应 ...

  10. 【转载】决策树Decision Tree学习

    本文转自:http://www.cnblogs.com/v-July-v/archive/2012/05/17/2539023.html 最近在研究规则引擎,需要学习决策树.决策表等算法.发现篇好文对 ...