专栏首页LIN_ZONEvue.js中滚动条加载更多数据

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 条评论
登录 后参与评论

相关文章

  • mac homebrew

    Homebrew 会将套件安装到独立目录,并将文件软链接至/usr/local 。

    lin_zone
  • Nginx 限流配置

    令牌以固定的速率产生并放入令牌桶中,当令牌桶放满后,多余的令牌会被抛弃;请求会消耗等比例的令牌。当令牌不够用的时候,请求过来后没有拿到令牌,这个请求就会被拒...

    lin_zone
  • ubuntu apt 软件源的更改

    在ubuntu下面有一个源列表,源列表里面都是一些网站信息,每条网址就是一个源,这个地址指向的数据标识着这台服务器上有哪些软件可以用

    lin_zone
  • 教您搭建与布署NTP时钟服务器

    网络时间协议(NTP)用来同步网络上不同主机的系统时钟。所有受管理的主机可以与一台名为NTP服务器的指定时间服务器同步时间。另一方面,NTP服务器则与任何公共N...

    NTP网络同步时钟
  • Bluehost 美国站和 Bluehost 中国站的关系

    魏艾斯博客www.vpsss.net
  • Bluehost 美国站和 Bluehost 中国站的区别

    魏艾斯博客www.vpsss.net
  • Docker与容器化:2015这股趋势势不可挡

    像云这样重大的IT趋势已经用了一些年头来普及——尽管其中有过一些消长,但是它们向前的脚步不可阻挡。其他一些则似乎是出人意料地完全征服了企业世界。过去12个月,像...

    静一
  • Python3中列表的使用

    列表操作常用操作包含以下方法: 1、list.append(obj):在列表末尾添加新的对象 2、list.count(obj):统计某个元素在列表中出现的次数...

    py3study
  • 多数据模型数据库 | 应用实例解析

    吕信,京东商城技术架构部资深架构师,拥有多年数据产品研发及架构经验。在京东及国内主导过多种数据产品的开发及社区建设,积极活跃于数据产品领域,对数据库及大数据领域...

    京东技术
  • CentOS中搭建NTP网络时间服务器

    网络时间协议(NTP)用来同步网络上不同主机的系统时钟。所有受管理的主机可以与一台名为NTP服务器的指定时间服务器同步时间。另一方面,NTP服务器则与任何公共N...

    NTP网络同步时钟

扫码关注云+社区

领取腾讯云代金券