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

时间: 2024-11-03 21:57:04

vue.js中滚动条加载更多数据的相关文章

jquery.autocomplete 插件扩展滚动条加载更多

项目中用到autocomplete插件,但是插件的原有功能,不能满足项目全部需求所以修改了增加了以下几点功能: 1 粘贴文本自动加载数据 2 滚动条滚动到底部加载更多数据 3 与页面插件联动更新数据(清除缓存) 4 增加插件赋值给一个隐藏域,就可以得到文本和值 (做asp.net的用起来比较方便) 如果要启用滚动条加载更多数据 配置参数时加上 scroll:true, pagingMore:true 在加载更多时请求的url参数会有一个page的参数 它标识当前请求的是第几页数据 ps(这个分页

js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据

防抖和节流,主要是用来防止过于平凡的执行某个操作,如浏览器窗口变化执行某个操作,监听某个input输入框keyup变化,瀑布流布局时Y轴滚动,图片加载. js函数的防抖 经过一段事件才执行某个操作,如果时间内又执行了该操作则延长时间重新开始计算 /* 不做处理input触发keyup事件 */ /* 输入快的话会出现输出结果多次重复 */ window.onload = function () { let obj = document.getElementById('input') obj.ad

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件.iScroll不仅仅是 滚动.它可以处理任何需要与用户进行移动交互的元素.在你的项目中包含仅仅4kb大小的iScroll,你的项目便拥有了滚动,缩放,平移,无限滚动,视差滚动,旋转功能.iScroll的强大毋庸置疑,本人也非常欢迎大家使用iScr

ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前,先把实现的基本原理说一下.当夜幕下拉到底部的时候,js可以判断滚动条的位置,到达底部触发js方法,执行jquery的ajax方法,向后台一般处理程序夜幕ashx文件请求数据源,得到json格式的数据源.然后,遍历json数据源,拼接一个li标签,再填充到页面上去. 首先,我们来做个简单的html页面

下拉滚动加载更多数据

简单地实现一个下拉滚动时加载更多数据的效果.这种效果经常在手机端.瀑布流时看到 1 KISSY.add('load',function(S,Core,IO,XTemplate){ 2 var $ = S.all, D = S.DOM, E = S.Event; 3 var API = { 4 'query':'query.do' 5 }; 6 var tpl = '{{#each result}}'+ 7 '<tr>'+ 8 '<td><input type="ch

iOS:详解MJRefresh刷新加载更多数据的第三方库

原文链接:http://www.ios122.com/2015/08/mjrefresh/ 简介 MJRefresh这个第三方库是李明杰老师的杰作,这个框架帮助我们程序员减轻了超级多的麻烦,节约了开发时间,提高了开发效率.由于目前能力有限,尚不能自己写一套框架,所以就先膜拜和看明白大牛的框架了. 用于为应用添加常用的上拉加载更多与下拉刷新效果,适用 UIScrollView . UITableView . UICollectionView . UIWebView. gtihub上的地址:http

js点击加载更多可以增加几条数据的显示

<div class="list"> <div class="one"> <div class="img"> <img src="../img/b6c.png"/> </div> <div class="infor"> <p class="detail">2018年8月陕西延长石油延安能源化工有限责任公司

使用jquery.more.js上滑加载更多

html: <div id="more"> <div class="single_item"> <div class="date"></div> <div class="author"></div> <div class="title"></div> </div> <a href="j

MVC中实现加载更多

需要实现的功能: 数据太多想初次加载部分数据,在底部加上"加载更多"按钮 点击后加载第二页数据(从数据库只取指定页数据)后接在已有数据后面(类似于android中的下拉加载更多) 每次加载时显示"正在加载--" 网上找了一些方法,类似于MvcPager分页组件,用的是v1.5.0版,但后台需要将分页后的对象列表ToPagedList,需要在MvcPager源码中加入public static PagedList<T> ToPagedList<T&g