• 关于 Infinite-Scroll 的搜索结果

回答

一.无限滚动概念首先,它是基于jQuery的,另外还要明白无限滚动的概念:无限滚动的实现原理就是当你在网页上的滚动条滚动到离网页底部一定长度的时候,触发某ajax函数(infinite-scroll内已经封装好),往后台加载文件或者数据,又或者从外部引入静态html形式文件。二.探讨infinite-scroll1.从网页头引入两个js文件,注意必须先放jquery的 [javascript] view plain copy 在CODE上查看代码片派生到我的代码片 <script src="css/infinite-scroll/jquery-1.6.4.js"></script> <script src="css/infinite-scroll/jquery.infinitescroll.js"></script> 2.之后在网页头自己写一个js脚本 [javascript] view plain copy 在CODE上查看代码片派生到我的代码片 <script> $(document).ready(function (){ $("#container").infinitescroll({ navSelector: "#navigation", //页面分页元素--本页的导航,意思就是一个可以触发ajax函数的模块 nextSelector: "#navigation a", //下一页的导航 itemSelector: ".scroll " , //此处我用了类选择器,选择的是你要加载的那一个块(每次载入的数据放的地方) animate: true, //加载时候时候需要动画,默认是false maxPage: 3, //最大的页数,也就是滚动多少次停。这个页码必须得要你从数据库里面拿 }); }); </script> 3.或许你看到这里还是不太清楚网页怎么定义,这里给出我的demo,希望可以有帮助 [html] view plain copy 在CODE上查看代码片派生到我的代码片 <%@ 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函数里还可定义的其他属性: [javascript] view plain copy 在CODE上查看代码片派生到我的代码片 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进行数据分页。

小旋风柴进 2019-12-02 02:37:33 0 浏览量 回答数 0

回答

回 3楼ivmmff的帖子 有7.8个吧  好多都是主题需要的  有Infinite Scroll    WP FancyZoom  WP User Avatar  WP-PostViews  WPJAM 七牛镜像存储  面包屑导航   自定义字段模板  多说  总共就这些了 ------------------------- 回 7楼ivmmff的帖子 好吧   那麻烦你  哪几个比较大啊?

小新起来啦 2019-12-02 01:50:08 0 浏览量 回答数 0

问题

关于把jquery瀑布流应用和数据库对接的问题

吴孟桥 2019-12-01 19:34:58 1220 浏览量 回答数 1

试用中心

为您提供0门槛上云实践机会,企业用户最高免费12个月

问题

谁有类似新浪滚动翻页的插件,不是无限滚动瀑布流啊。

a123456678 2019-12-01 20:20:41 764 浏览量 回答数 1
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 企业信息查询 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 2020阿里巴巴研发效能峰会 企业建站模板 云效成长地图 高端建站 云栖号弹性计算 阿里云云栖号 云栖号案例 云栖号直播