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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏落影的专栏

iOS开发笔记(八)---- 键盘、静态库、动画、Crash定位

42590
来自专栏前端布道

Angular开发实践(五):深入解析变化监测

什么是变化监测 在使用 Angular 进行开发中,我们常用到 Angular 中的绑定——模型到视图的输入绑定、视图到模型的输出绑定以及视图与模型的双向绑定。...

41780
来自专栏技术之路

Qt5 新特性

Qt 5 已经临近发布,其最大的特点就是模块化。将原来庞大的模块更细分为不同的部分,同时,一个大版本的升级,当然少不了添加、删除各个功能类。文本简单介绍 Qt5...

43380
来自专栏熊二哥

Sublime快速入门

在当前的互联网时代,任何程序语言和相关技术都只是实现互联网应用的一种手段,这也就造成了大量的互联网工程师长期与不同的语言、技术、系统环境、IDE等打交道。因此一...

20650
来自专栏挖掘大数据

Cobub无码埋点关键技术实现流程(附图)

随着大数据时代的到来,数据采集也已经变的越来越重要。前端埋点作为一个比较成熟的数据接入手段被广泛应用着。目前埋点分为两种方式,有码与无码埋点。有码埋点比较容易理...

27460
来自专栏不知的专栏

反-反爬虫:用几行代码写出和人类一样的动态爬虫

本文将从 Phantomjs 动态爬虫介绍起,用3行代码傻瓜式完成基于 Casper 的动态爬虫来绕过对抗策略获取页面数据。

1.4K20
来自专栏java一日一条

优化 iOS 程序性能的 25 个方法

ARC(Automatic ReferenceCounting, 自动引用计数)和iOS5一起发布,它避免了最常见的也就是经常是由于我们忘记释放内存所造成的内存...

14140
来自专栏破晓之歌

Python 的 GUI 开发工具 原

Flexx 是一个纯 Python 工具包,用来创建图形化界面应用程序。其使用 Web 技术进行界面的渲染。你可以用 Flexx 来创建桌面应用,同时也可以导出...

94420
来自专栏CSDN技术头条

前端知识点总结——Vue

作用:将表达式执行的结果 输出当调用元素的 innerHTML 中;还可以将数据绑定到视图。

14420
来自专栏游戏杂谈

【hta版】获取AppStore上架后的应用版本号

之前写过一篇文章:获取AppStore上架后的应用版本号,那一篇文章使用node.js实现,存在的问题就是如果在没有安装node.js运行环境下是无法运行的,而...

13620

扫码关注云+社区

领取腾讯云代金券