vue分页显示.php数据,vue.js 分页加载，向上滑动，依次加载数据。

export default {

layout: 'default',

data(){

return{

page:1,

pageSize:10,

orderListArr:[],

prodListLoadingOver:false,

prodListLastPage: false,

}

},

mounted(){

window.addEventListener('scroll', this.handleScroll);

},

created(){

this.fetchOrderListAction();

},

methods:{

fetchOrderListAction(){

let reqBody = {};

reqBody.page = this.page;

reqBody.pageSize = this.pageSize;

this.prodListLoadingOver = false;

fetchOrderList(JSON.stringify(reqBody)).then((res) => {

let resData = res.data;

if (resData.respHeader && resData.respHeader.resultCode === 0) {

this.prodListLoadingOver = true;

this.orderListArr = resData.respBody.subsList;

if(this.page == 1){

this.orderListArr = resData.respBody.subsList;

}else{

this.orderListArr = this.orderListArr.concat(resData.respBody.subsList);

}

if(resData.respBody.subsList.length < this.pageSize){

this.prodListLastPage = true;

}

}else{

Toast({

message: resData.respHeader.message || "网络异常",

});

}

});

},

handleScroll(){

let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //屏幕的高度

let prodListHeight = document.querySelector('.myOrderListWrapper').offsetHeight-h-20; //.myOrderListWrapper 商品列表容器

console.log(scrollTop,":::",prodListHeight)

if(scrollTop > prodListHeight && this.prodListLoadingOver && !this.prodListLastPage){

this.page = this.page + 1;

this.fetchOrderListAction();

}

},

},

destroyed(){

window.removeEventListener('scroll', this.handleScroll);

}

}

在mounted中注册滚动事件，在destroyed中销毁。。。其他鼠标事件也是如此。

iScroll&period;js 向上滑动异步加载数据回弹问题

iScroll是一款用于移动设备web开发的一款插件.像缩放.下拉刷新.滑动切换等移动应用上常见的一些效果都可以轻松实现. 现在最新版本是5.X,官网这里:http://iscrolljs.com/ ...

FMX StringGrid向上滑动自动加载记录(二)

写完FMX StringGrid向上滑动自动加载记录(一)自己也觉得不理想,实现的别扭与复杂,现在找到更好的实现方法,原来,StringGrid从基类TCustomPresentedScrollBox ...

加载信息，先从数据库取出5条实现分页，鼠标向上滑动触发Ajax再加载5条，达到异步刷新，优化加载。。。

php数据库取数据 <?php include("conn1.php"); include('../function/functions.php'); $page=intva ...

vue&period;js组件之间的通讯-----父亲向儿子传递数据，儿子接收父亲的数据

vue&period;js常见面试题及常见命令介绍

Vue.js介绍 Vue.js是JavaScript MVVM(Model-View-ViewModel)库,十分简洁,Vue核心只关注视图层,相对AngularJS提供更加简洁.易于理解的API.V ...

随机推荐

Windows Server 2008 R2父域管理员与子域管理员相互登录访问

一.问题: 父域创建的域管理员登录不了子域服务器,子域创建的域管理员登录不了父域服务器? 二.原因分析: 父域创建的域管理员是存在父域中,而子域创建的域管理员存在子域中,父域创建的管理员是不存在子域中 ...

JAVAMAIL手动发送邮件

telnet smtp.sina.com 25ehlo hncu/*ehlo命令是SMTP邮件发送程序与SMTP邮件接收程序建立连接后必须发送的第一条SMTP命令,参数表示 ...

NVelocity 实现简单的留言板

留言版简单实现 -------------------------------------------------------------------------------------------- ...

how to forget about delta cycles for RTL design

A delta cycle is a VHDL construct used to makeVHDL, a concurrent language, executable on asequential ...

关于苹果APP的上架整理

由于苹果的机制,在非越狱机器上安装应用必须通过官方的App Store,开发者开发好应用后上传App Store,也需要通过审核等环节.AppCan作为一个跨主流平台的一个开发平台,也对ipa包上传A ...

Java中，多态的实现有哪些要求？实现多态的关键技术？

多态指的是允许不同类的对象对同一消息做出响应,即同一消息可以根据发送对象的不同而采用多种不同的行为方式(发送消息就是函数调用).实现多态的方法是动态绑定( Dynamic Binding),动态绑定 ...

&lbrack;Go&rsqb; golang创建目录写文件判断文件

package main import ( "log" "os" ) func main() { //创建目录 os.Mkdir("test&quot ...

Win7命令终端基础配色指南

微软对控制台字体的元数据有严格的限制,https://support.microsoft.com/zh-cn/help/247815/necessary-criteria-for-fonts-to-b ...

struts2框架

详细教程 参考struts教程https://www.w3cschool.cn/struts_2/struts_configuration.html Struts2 基于MVC设计模式的web应用程序 ...

&lbrack;19&sol;03&sol;20-星期三&rsqb; 常用类&lowbar;Enum&lpar;枚举&rpar;类

一.概念(JDK 1.5之后才有的类) 所有的枚举(英语:enumeration) 类型隐性地继承自 java.lang.Enum.枚举实质上还是类,而每个被枚举的成员实质就是一个枚举类型的实例,他们 ...