1. export default {
  2. layout: 'default',
  3. data(){
  4. return{
  5. page:1,
  6. pageSize:10,
  7. orderListArr:[],
  8. prodListLoadingOver:false,
  9. prodListLastPage: false,
  10. }
  11. },
  12. mounted(){
  13. window.addEventListener('scroll', this.handleScroll);
  14. },
  15. created(){
  16. this.fetchOrderListAction();
  17. },
  18. methods:{
  19. fetchOrderListAction(){
  20. let reqBody = {};
  21. reqBody.page = this.page;
  22. reqBody.pageSize = this.pageSize;
  23. this.prodListLoadingOver = false;
  24. fetchOrderList(JSON.stringify(reqBody)).then((res) => {
  25. let resData = res.data;
  26. if (resData.respHeader && resData.respHeader.resultCode === 0) {
  27. this.prodListLoadingOver = true;
  28. this.orderListArr = resData.respBody.subsList;
  29. if(this.page == 1){
  30. this.orderListArr = resData.respBody.subsList;
  31. }else{
  32. this.orderListArr = this.orderListArr.concat(resData.respBody.subsList);
  33. }
  34. if(resData.respBody.subsList.length < this.pageSize){
  35. this.prodListLastPage = true;
  36. }
  37. }else{
  38. Toast({
  39. message: resData.respHeader.message || "网络异常",
  40. });
  41. }
  42. });
  43. },
  44. handleScroll(){
  45. let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  46. let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //屏幕的高度
  47. let prodListHeight = document.querySelector('.myOrderListWrapper').offsetHeight-h-20; //.myOrderListWrapper 商品列表容器
  48. console.log(scrollTop,":::",prodListHeight)
  49. if(scrollTop > prodListHeight && this.prodListLoadingOver && !this.prodListLastPage){
  50. this.page = this.page + 1;
  51. this.fetchOrderListAction();
  52. }
  53. },
  54. },
  55. destroyed(){
  56. window.removeEventListener('scroll', this.handleScroll);
  57. }
  58. }
  1. mounted中注册滚动事件,在destroyed中销毁。。。其他鼠标事件也是如此。
  1.  

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. windows 安装使用 Memcached

    Windows无官方版本:下载地址http://static.runoob.com/download/memcached-win64-1.4.4-14.zip 安装: 1.解压下载的压缩包2.命令行模 ...

  2. C语言中的!!

    C语言中!!的作用是?看例子: #include <stdio.h> int main() { ; printf("test=%d !test=%d !!test=%d\n&qu ...

  3. LVS负载均衡DR工作流程

    LVS负载均衡DR工作流程 (a) 当用户请求到达Director Server,此时请求的数据报文会先到内核空间的PREROUTING链. 此时报文的源IP为CIP,目标IP为VIP (b) PRE ...

  4. vue.js父子组件通信动态绑定

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

  5. jQuery .submit()

    .submit() Events > Form Events | Forms .submit( handler )Returns: jQuery Description: Bind an eve ...

  6. spark 笔记 3:Delay Scheduling: A Simple Technique for Achieving Locality and Fairness in Cluster Scheduling

    spark论文中说他使用了延迟调度算法,源于这篇论文:http://people.csail.mit.edu/matei/papers/2010/eurosys_delay_scheduling.pd ...

  7. RF-创建一个自定义关键字库

    仓库自定义库 这里以Selenium2Library库进行举例说明: 编写一个自定义仓库类(与库文件夹名一致),继承关键字类,指定范围和版本即可. 需要声明__init__. import os fr ...

  8. leetcode 33搜索旋转排序数组

    暴力解法:O(n) 想办法用二分查找Ologn

  9. VS2017 -error LNK1104: 无法打开文件“msvcprtd.lib”

    原文地址:https://blog.csdn.net/u012308586/article/details/89309495 VS2017 -error LNK1104 无法打开文件“msvcprtd ...

  10. 微信小程序---交互反馈

    1.学习大纲: 2.showToast(): wx.showToast({ title: '成功', icon: 'success', duration: }) 3.hieToast(): wx.sh ...