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中销毁。。。其他鼠标事件也是如此。
vue.js 分页加载,向上滑动,依次加载数据。的更多相关文章
- iScroll.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.js组件之间的通讯-----父亲向儿子传递数据,儿子接收父亲的数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- FMX StringGrid向上滑动自动加载记录(一)
有时候,做的app还是需要用StringGrid来显示数据,但如果用StringGrid的Livebinding绑定到一个数据集TDataset,当记录超过1000条时,效率非常低,甚至达不到实用状态 ...
- Web App 向上滑动动态加载数据 2015-06-11 09:36 20人阅读 评论(0) 收藏
好久没有写博客了 - - ,个人原因 个人原因.. 宣传一下...自己的.NET群:252713569 欢迎各位大神加入 嗯..最近在公司开发微信平台的东西..需要做一个WebAPP(PS:其实就是 ...
- 【Vue.js】代码优化:在dom中加一行v-if就可少写一个循环类方法
[问题描述] 把当前用户的购物车中(cartList),商品(good)选中字段checked = true的商品在订单页面中进行展示出来. [一般做法](两次循环) 首先取出当前用户的购物车列表,循 ...
- vue.js 分页
<template> <div class="index"> <el-pagination background :hide-on-single-pa ...
- html+vue.js 实现分页可兼容IE
当功能比较简单,在单一html中使用vue.js分页展示数据,并未安装脚手架,或使用相关UI框架,此时需要手写一个分页器,不失为最合理最便捷的解决方案, 先看一下实现效果: 上代码: 1.简单搞一搞 ...
随机推荐
- C# 截取屏幕局部
//截取全屏图象 private void btnFullScreen_Click(object sender, EventArgs e) { //创建图象,保存将来截取的图象 Bitmap imag ...
- MySQL 数据库 高级查询
1.连接查询select * from Info,Nation #笛卡尔积select * from Info,Nation where Info.Nation=Nation.Code join on ...
- 使用多块GPU进行训练 1.slim.arg_scope(对于同等类型使用相同操作) 2.tf.name_scope(定义名字的范围) 3.tf.get_variable_scope().reuse_variable(参数的复用) 4.tf.py_func(构造函数)
1. slim.arg_scope(函数, 传参) # 对于同类的函数操作,都传入相同的参数 from tensorflow.contrib import slim as slim import te ...
- 对“XXX::Invoke”类型的已垃圾回收委托进行了回调。这可能会导致应用程序崩溃、损坏和数据丢失。向非托管代码传递委托时,托管应用程序必须让这些委托保持活动状态,直到确信不会再次调用它们
托管调试助手“CallbackOnCollectedDelegate”在“D:\XXX\XXX.vshost.exe”中检测到问题. 其他信息: 对“XXX+HookProc::Invoke”类型的已 ...
- 在 manifest 和代码中如何注册和使用 BroadcastReceiver?
在清单文件中注册广播接收者称为静态注册,在代码中注册称为动态注册.静态注册的广播接收者只要 app 在系统中运行则一直可以接收到广播消息,动态注册的广播接收者当注册的 Activity 或者 Serv ...
- DateTimePicker 日期时间选择器
在同一个选择器里选择日期和时间 DateTimePicker 由 DatePicker 和 TimePicker 派生,Picker Options 或者其他选项可以参照 DatePicker 和 T ...
- Color色彩
Element 为了避免视觉传达差异,使用一套特定的调色板来规定颜色,为你所搭建的产品提供一致的外观视觉感受. ¶主色 Element 主要品牌颜色是鲜艳.友好的蓝色. Blue #409EFF ¶辅 ...
- 【MAC】图片编辑工具-合成图片
MAC中和wIn环境中画图一样的工具,可以对图片进行编辑 step1: step2: step3: 从工具栏中选择你要使用的工具,进行对应的操作. step4: 合成图片: 效果如图:
- linux(centOS7)的基本操作(七) 其它
本地与linux服务器之间的文件传输 本地下载的文件,如果想在远端的linux服务器上执行,需要文件传输.如果本地使用windows系统,则借助XFTP软件的图形界面即可.如果本地使用macOS系统, ...
- web开发(四) 一次性验证码的代码实现
在网上看见一篇不错的文章,写的详细. 以下内容引用那篇博文.转载于<http://www.cnblogs.com/whgk/p/6426072.html>,在此仅供学习参考之用. 其实实现 ...