当前位置: 首页 > news >正文

Vue.js中滚动条加载更多数据

本文章参考:http://www.cnblogs.com/ssrsblogs/p/6108423.html

 

分析:
1.需要判断滚动条是否到底部:

需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。

  scrollTop为滚动条在Y轴上的滚动距离。

  clientHeight为内容可视区域的高度。

  scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。

  从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。(兼容不同的浏览器)。

 

vue的生命周期:参考:https://segmentfault.com/a/1190000008010666

 

在vue的页面组件中有一个created 时期,在这里给窗口加上窗口滚动的监听

例:

判断,到达窗口底部的时候,执行自定义的get方法

自定义的get就是向后台发送请求数据的方法,其中每次调用后都执行 page++

这样才能保证每次请求的数据不重复

 

至于在后台的方法,主要是部分:

$num = 5;        //$num是自定的每次请求的条数

$start = page*$num      

然后使用 limit 及 offset 查询:参考:http://blog.csdn.net/u012927188/article/details/41957879

经常用到在数据库中查询中间几条数据的需求

比如下面的sql语句:

① selete * from testtable limit 2,1;

② selete * from testtable limit 2 offset 1;

注意:

1.数据库数据计算是从0开始的

2.offset X是跳过X个数据,limit Y是选取Y个数据

3.limit  X,Y  中X表示跳过X个数据,读取Y个数据

这两个都是能完成需要,但是他们之间是有区别的:

①是从数据库中第三条开始查询,取一条数据,即第三条数据读取,一二条跳过

②是从数据库中的第二条数据开始查询两条数据,即第二条和第三条。

最后把查询的结果返回给刚刚请求该方法的get()中的ajax或axios

之后,使用

将新查询到的结果添加到之前在页面中渲染的数组,这样就可以实现瀑布流加载

 

注:

为了美观,如果使用一些loading及loadmore组件给用户一个等待的缓冲,一定要特别注意让这些组件显示的时机的条件

 

最后,希望这篇文章可以帮助到和我一样项目经验浅的人,

如需转载,请注明出处:http://www.cnblogs.com/zhuchenglin/p/6841990.html

 

转载于:https://www.cnblogs.com/zhuchenglin/p/6841990.html

相关文章:

  • 如何一键收藏微信文章?
  • 【Linux】【Services】【Project】Haproxy Keepalived Postfix实现邮件网关Cluster
  • 10.2.1 关于vc++不支持把类的成员函数定义为类的友元函数的处理
  • OC 手势可能出现的问题
  • Excel常用12个公式
  • Python web 框架:web.py
  • 【智能家居篇】通信技术简单介绍
  • Linux系统运维之MYSQL数据库集群部署(主主互备)
  • 基于ssh,shell,python,iptables,fabric,supervisor和模板文件的多服务器配置管理...
  • 【bzoj3916】[Baltic2014]friends 字符串hash
  • (续)使用Django搭建一个完整的项目(Centos7+Nginx)
  • 单链表的逆置
  • CentOS6.3上安装与配置nginx+php+mysql环境
  • phoenixframe自己主动化測试平台对div弹出框(如弹出的div登陆框)的处理
  • atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7
  • exports和module.exports
  • PHP CLI应用的调试原理
  • session共享问题解决方案
  • 阿里云爬虫风险管理产品商业化,为云端流量保驾护航
  • 第2章 网络文档
  • 更好理解的面向对象的Javascript 1 —— 动态类型和多态
  • 开年巨制!千人千面回放技术让你“看到”Flutter用户侧问题
  • 前端路由实现-history
  • 前端每日实战:70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽
  • 跳前端坑前,先看看这个!!
  • 教程:使用iPhone相机和openCV来完成3D重建(第一部分) ...
  • ​LeetCode解法汇总2808. 使循环数组所有元素相等的最少秒数
  • (10)STL算法之搜索(二) 二分查找
  • (2020)Java后端开发----(面试题和笔试题)
  • (4) PIVOT 和 UPIVOT 的使用
  • (7)STL算法之交换赋值
  • (ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY)讲解
  • (三分钟)速览传统边缘检测算子
  • (三分钟了解debug)SLAM研究方向-Debug总结
  • (四)Tiki-taka算法(TTA)求解无人机三维路径规划研究(MATLAB)
  • (转)关于多人操作数据的处理策略
  • (转)全文检索技术学习(三)——Lucene支持中文分词
  • .class文件转换.java_从一个class文件深入理解Java字节码结构
  • .NET Core实战项目之CMS 第十二章 开发篇-Dapper封装CURD及仓储代码生成器实现
  • .net 后台导出excel ,word
  • .NET中的十进制浮点类型,徐汇区网站设计
  • @kafkalistener消费不到消息_消息队列对战之RabbitMq 大战 kafka
  • [ 2222 ]http://e.eqxiu.com/s/wJMf15Ku
  • [16/N]论得趣
  • [8-27]正则表达式、扩展表达式以及相关实战
  • [Android]How to use FFmpeg to decode Android f...
  • [Bada开发]初步入口函数介绍
  • [CF407E]k-d-sequence
  • [CTSC2014]企鹅QQ
  • [Foreman]解决Unable to find internal system admin account
  • [GN] 设计模式——面向对象设计原则概述
  • [HackMyVM]靶场 VivifyTech
  • [IE9] IE9 beta版下载链接
  • [IE编程] WebBrowser控件中设置页面的缩放
  • [Java] 图说 注解