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 分页加载,向上滑动,依次加载数据。的更多相关文章

  1. iScroll.js 向上滑动异步加载数据回弹问题

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

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

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

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

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

  4. vue.js组件之间的通讯-----父亲向儿子传递数据,儿子接收父亲的数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. FMX StringGrid向上滑动自动加载记录(一)

    有时候,做的app还是需要用StringGrid来显示数据,但如果用StringGrid的Livebinding绑定到一个数据集TDataset,当记录超过1000条时,效率非常低,甚至达不到实用状态 ...

  6. Web App 向上滑动动态加载数据 2015-06-11 09:36 20人阅读 评论(0) 收藏

    好久没有写博客了 - - ,个人原因 个人原因..  宣传一下...自己的.NET群:252713569 欢迎各位大神加入 嗯..最近在公司开发微信平台的东西..需要做一个WebAPP(PS:其实就是 ...

  7. 【Vue.js】代码优化:在dom中加一行v-if就可少写一个循环类方法

    [问题描述] 把当前用户的购物车中(cartList),商品(good)选中字段checked = true的商品在订单页面中进行展示出来. [一般做法](两次循环) 首先取出当前用户的购物车列表,循 ...

  8. vue.js 分页

    <template> <div class="index"> <el-pagination background :hide-on-single-pa ...

  9. html+vue.js 实现分页可兼容IE

    当功能比较简单,在单一html中使用vue.js分页展示数据,并未安装脚手架,或使用相关UI框架,此时需要手写一个分页器,不失为最合理最便捷的解决方案, 先看一下实现效果: 上代码: 1.简单搞一搞 ...

随机推荐

  1. React 开发中面临的九个重要抉择

    抉择系列:在技术开发的过程中我们会面临着各种各样的抉择,我们在不同情境下该如何选择恰当的技术,这是本系列文章想要解决的问题. 在 React 开发的过程中我们常常会遇到一些抉择,下面我将选取其中一些个 ...

  2. 一、基础篇--1.2Java集合-List、Set、Map区别

     List.Set.Map区别 三者关系如下: 结构特点 1.List和Set是存储单列数据集合,Map是存储键值对这样的双列数据集合: 2.List中存储的数据都是有序的,并且允许重复:Map中存储 ...

  3. QBXTD2上午

    话说lyd昨天没讲完他的该死的贪心,所以今天继续讲 贪心思想是考虑AB是最快的人,CD是最慢的人,要把CD两个人送过河,只有两种方案,牵扯到四个人,并且n个规模的原问题化成了n-2个规模的子问题 那么 ...

  4. Cannot find terminfo entry for 'linux'.

    解决方案: 1. 查看 /usr/share/terminfo 目录下的内容,该目录的内容表示该主机支持哪些终端类型. 2. 通过修改系统变量TERM为vt100. 执行 export TERM=vt ...

  5. HTML基础汇总

    一.HTML的概述(了解) a.html是什么 : hypertext markup language 超文本标记语言           超文本:音频,视频,图片称为超文本..           ...

  6. k8s中使用harbor

    参考地址:https://www.cnblogs.com/wayneiscoming/p/7716238.html .在harbor的ui界面上注册一个账号 姓名:zihao 全名:zhuzihao ...

  7. 【SSM】---Spring+SpringMVC+Mybatis框架整合

    参考 百度经验 https://jingyan.baidu.com/article/2a1383288a85a9074a134f1b.html CSDN http://blog.csdn.net/ge ...

  8. 在webpack搭建的vue项目中如何管理好后台接口地址

    在最近做的vue项目中,使用了webpack打包工具,以前在做项目中测试环境和生产环境的接口地址都是一样的,由于现在接口地址不一样,需要在项目打包的时候手动切换不同的地址,有时候忘记切换就要重新打包, ...

  9. cocos2dx基础篇(22) 基本动画CCAnimation/CCAnimate

    [小知识] CCSpriteFrame     :精灵帧.    它是相对动画而产生的,其实就是一张纹理图片. CCAnimationFrame  :动画帧.    由精灵帧与间隔帧数组成,是动画CC ...

  10. 【Ruby on Rails 学习五】Ruby语言的方法

    1.方法的调用 2.自定义方法 3.带默认值的自定义方法 4.带返回值的自定义方法 方法或者说是函数,实际上是包含了一段代码,去执行某一个特定的过程. def add(a=3,b=2) return ...