infinite-scroll插件使用
网上对于infinite-scroll插件使用的例子不多。但由于它的出现,鼓吹了瀑布流形式的页面展示方式,所以不得不了解了解这种新的分页方式。
官网上有对infinite-scroll的详细描述,但一般人即使看未必看得懂,看得懂未必就调试成功。所以借今晚有点时间,把跑通的例子供大家借鉴。
一.无限滚动概念
首先,它是基于jQuery的,另外还要明白无限滚动的概念:无限滚动的实现原理就是当你在网页上的滚动条滚动到离网页底部一定长度的时候,触发某ajax函数(infinite-scroll内已经封装好),往后台加载文件或者数据,又或者从外部引入静态html形式文件。
二.探讨infinite-scroll
1.从网页头引入两个js文件,注意必须先放jquery的
- <script src="css/infinite-scroll/jquery-1.6.4.js"></script>
- <script src="css/infinite-scroll/jquery.infinitescroll.js"></script>
2.之后在网页头自己写一个js脚本
- <script>
- $(document).ready(function (){
- $("#container").infinitescroll({
- navSelector: "#navigation", //页面分页元素--本页的导航,意思就是一个可以触发ajax函数的模块
- nextSelector: "#navigation a", //下一页的导航
- itemSelector: ".scroll " , //此处我用了类选择器,选择的是你要加载的那一个块(每次载入的数据放的地方)
- animate: true, //加载时候时候需要动画,默认是false
- maxPage: 3, //最大的页数,也就是滚动多少次停。这个页码必须得要你从数据库里面拿
- });
- });
- </script>
3.或许你看到这里还是不太清楚网页怎么定义,这里给出我的demo,希望可以有帮助
- <%@ page language="java" contentType="text/html; charset=utf-8"
- pageEncoding="utf-8"%>
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>无限翻页效果</title>
- <script src="css/infinite-scroll/jquery-1.6.4.js"></script>
- <script src="css/infinite-scroll/jquery.infinitescroll.js"></script>
- <script src="css/infinite-scroll/test/debug.js"></script>
- <script>
- $(document).ready(function (){ //别忘了加这句,除非你没学Jquery
- $("#container").infinitescroll({
- navSelector: "#navigation", //页面分页元素--成功后自动隐藏
- nextSelector: "#navigation a",
- itemSelector: ".scroll " ,
- animate: true,
- maxPage: 3,
- });
- });
- </script>
- </head>
- <body>
- <div id="container"> <!-- 容器 -->
- <div class="scroll"> <!-- 每次要加载数据的数据块-->
- 第一页内容第一页内容<br>
- 第一页内容<br>第一页内容<br>第一页内容<br>
- 第一页内容<br>第一页内容<br>第一页内容<br>
- 第一页内容<br>第一页内容<br>第一页内容
- </div>
- </div>
- <div id="navigation" align="center"> <!-- 页面导航-->
- <a href="user/list?page=1"></a> <!-- 此处可以是url,可以是action,要注意不是每种html都可以加,是跟当前网页有相同布局的才可以。另外一个重要的地方是page参数,这个一定要加在这里,它的作用是指出当前页面页码,没加载一次数据,page自动+1,我们可以从服务器用request拿到他然后进行后面的分页处理。-->
- </div>
- </body>
- </html>
三.细微部分
1.js函数里还可定义的其他属性:
- debug : true, //用于调试,如果需要用到,只需在网页头引入官网demo里的debug.js文件
- loadingImg : "/img/loading.gif", //加载时候显示的进度条,用户可以自定义
- loadingText : "Loading new posts...", //加载时显示的文字
- extraScrollPx: 50, //离网页底部多少像素时触发ajax
- donetext : "I think we've hit the end, Jim" , //加载完数据(到达底部时)显示的文字提醒
- errorCallback: function(){}, //加载完数据后的回调函数,可选
其他属性暂不作过多介绍
2.数据的载入方式
①html :如果你已经有固定的数据块,可以放到html里面加载静态页面。
②json :可以用后台返回json的方式,返回的时候要指定temple里面的html模版,否则会出错。
③我上面例子用的其实也是json,前台在Action层把数据取出后再用StringBuilder拼装成html格式的字符串返回前台。(个人习惯)
3.数据分页方式
本例用hibernate进行数据分页。
以上内容仅作参考,时间问题暂且收笔。
infinite-scroll插件使用相关推荐
- jquery插件(二):Infinite Scroll–无限分页
一.前言 现在有很多网站都有这样的交互 1.当你往下浏览页面时,页面会自动去异步加载数据. 无限分页效果 infinite scroll 效果图 –ifxoxo.com 2.在页面下方有一个" ...
- infinitescroll php,WordPress: 增加无限分页(Infinite Scroll)功能
Infinite Scroll是一种动态加载内容的方式,当网页滚动到底部时,自动载入本需要翻页才能看到的内容,在社交应用中很常见,例如新浪微博. WordPress.com已经支持了这个功能,但自己h ...
- 无限滚动插件Infinite Scroll
最近一个项目需要用到无限滚动,调查了很多最后用了Infinite Scroll这个插件. 优点 ①ajax的函数是内部已经封装好,所有不需要单独的调用. ②后台返回的形式既可以是静态html形式也可以 ...
- Infinite Scroll - jQuery WP 无限滚动插件
无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll 这款 ...
- WordPress下拉加载插件Infinite Scroll之手动点击加载实现
本文基于上一篇博文<WordPress 无限分页下拉加载插件(Infinite Scroll)功能使用记录>而写,上文说到WordPress插件Infinite Scroll的自动加载分页 ...
- mint-ui 中 Infinite scroll 在tab-container中使用数据全部加载的问题
项目中用到了Infinite scroll 这个组件,但是初始化的时候,getList总会请求两次, 网上查了部分资料,如 <ul class="mui-table-view &quo ...
- vue-scroller的使用 开发自己的 scroll 插件
vue-scroller的使用 在spa开发过程中,难免会遇到使用scroll的情况,比如下面的: 即,当用户选择好商品之后,点击购物车,就会有一个购物车弹窗,如果选择的商品小于三个,刚好合适,如果多 ...
- mint-ui Infinite scroll 重复加载、加载无效的原因及解决方案
mint-ui Infinite scroll 重复加载.加载无效的原因及解决方案 参考文章: (1)mint-ui Infinite scroll 重复加载.加载无效的原因及解决方案 (2)http ...
- Chrome-手动安装罗技Flow scroll插件
可能我的Chrome是用甲壳虫引导器的原因吧,安装Flow scroll后,没有自动给chrome安装插件,因此手动安装 1.在Flow scroll的安装目录下,有一个文件夹LogiSmoothFi ...
- vue 移动端音乐(3) amp;amp;gt;热门歌单推荐部分(webpack-dev-conf.js做后端接口代理+scroll插件)
1. 首先,获取歌单推荐部分的数据,与获取推荐数据不同,热门歌单数据的接口有host和referer的显示,我们的api请求被拒绝(500错误),必须要修改header,但是前端不能直接修改reque ...
最新文章
- 模板 - 2 - SAT问题
- windows无法连接到打印机 操作失败,错误为0x00000002 解决方案
- 【Linux】6.服务器会话的screen用法
- 2020-11-6(简述html)
- 求矩形中心点坐标编程c语言,c语言编程序求矩形面积 我是新手,很多不懂,初学...
- windows下用pycharm安装tensorflow简易教程
- 选购安防交换机时需要注意哪些误区?
- MarkDown/Html在线转换(支持代码高亮,可复制到微信公众号、今日头条)
- Python笔记-Flask框架Get和Post参数相关
- python与数值计算环境安装
- MySQL误删数据救命指南:必收藏
- 图解再谈ssh port forwarding-ssh隧道技术
- Kali-linux识别活跃的主机
- linux内存管理源码分析 - 页框分配器
- Atitit 拦截数据库异常的处理最佳实践
- 计算机联锁设备的操作,计算机联锁系统设备的键盘操作
- Power BI应用案例:淘宝用户行为分析实战
- 如何搭建WordPress个人博客网站?
- 一种高效的q+1准均匀量化(quasi-uniform quantization)方法及MATLAB实现
- 【C库函数】 strstr函数详解
热门文章
- 深入浅出说智图—POW矿池篇
- 【车机互联】【中控】 车机互联方法【车载高德地图】【手机投屏】【HiCar】【carlife】【腾讯车联】【投屏】
- 使Firefox以全尺寸显示大图像
- Deepin15.6和win10 pro双系统(同硬盘)
- 分布式发电与智能微电网虚拟仿真实验
- 5270m4服务器通电自动开机,常见机型开启加电自启动功能配置方法
- java毕业设计基于JS的租房网站mybatis+源码+调试部署+系统+数据库+lw
- 图像处理与计算机视觉 基础、经典以及最近发展
- 【转载】图像处理与计算机视觉的经典书籍
- SSH 无法连接远程服务器