月光博客 » 网站建设 » 使用Infinite Ajax Scroll实现下拉加载效果

使用Infinite Ajax Scroll实现下拉加载效果

  现在很多网页都有个体验不错的效果:浏览到页面底部的时候,自动加载下一页内容,也就是下拉加载效果,这种效果可以让用户不用点击“下一页”按钮,也可以实现翻页,无论在PC还是手机上,体验效果都很不错,下面我就介绍一下网站开发的时候如何实现下拉加载效果。

  Infinite Ajax Scroll是一款jQuery滚动分页插件(页面滚动到最底部自动异步加载数据),功能完善,设置简单,目前的版本是2.3.0,个人用户可以免费使用。

  首先去infiniteajaxscroll网站下载一个名为jquery-ias.min.js的文件,这个js文件需要jquery支持,一般的网站主题都会引入jquery库,没有的话就手动加一个jquery库。

使用INFINITE AJAX SCROLL实现下拉加载效果

  之后确认一下网站的框架结构,找到四个元素的id或名称:内容块、内容条目、导航栏、下一页。

  Infinite Ajax Scroll支持按照ID取值和按照class取值,ID就在名称前加#,class就在名称前加。符号。编辑jquery-ias.min.js文件,在文件尾部加入配置参数代码即可。

  举个例子。

  一个页面的内容如下:

<div class="container">
  <div class="item">...</div>
  <div class="item">...</div>
</div>
<div id="pagination">
  <a href="page1.html">1</a>
  <a href="page2.html" class="next">2</a>
</div>

  则 Infinite Ajax Scroll 需要增加的代码如下:

var ias = $.ias({
  container:  ".container",
  item:       ".item",
  pagination: "#pagination",
  next:       ".next a"
});
// Add a loader image which is displayed during loading
ias.extension(new IASSpinnerExtension());

  上面代码最后一行是在加载的时候显示一个加载图标,不加也可以。

  对于WordPress来说,不同的模板修改修改的参数不同,但大多数直接设置即可正常工作。

  对于Z-Blog来说,就不行了,因为里面没有下一页的标记,需要修改代码,打开c_system_lib.asp文件,找到下面一行:

Template_PageBar=Template_PageBar & "<span class=""page now-page"">" & i & "</span>"

  在下面增加如下几行

elseif i=intNowPage + 1 then
strPageBar=Replace(strPageBar,"<#pagebar/page/url#>",s)
strPageBar=Replace(strPageBar,"<#pagebar/page/number#>","<span class=""page"">"&i&"</span>")
strPageBar=Replace(strPageBar,"page-numbers","page-numbers next-page")
Template_PageBar=Template_PageBar & strPageBar

  之后就有了下一页的选择器next-page了。

顶一下 ▲()   踩一下 ▼()

相关文章

  1. 1
    荔乡根子genziwin   说道:
    下拉加载总有种感觉深不见底。
    支持(6反对(0回复
  1. 2
    末日来临   说道:
    最恶心的体验就是这个了
    加载一堆没用的帖子占用空间,还把浏览器搞卡
    结果一直翻不到自己想要的那页,浪费大家的时间

    发明这个的猪头应该被活活砸死!
    支持(5反对(1回复
  1. 3
    90人网络   说道:
    很久没看代码了
    支持(1反对(0回复
  1. 4
    simon   说道:
    WordPress 2017主题 ,想要在分类文章列表里实现,下拉自动加载更多效果,可否请教怎样做
    支持(1反对(0回复
  1. 5
    云上课堂   说道:
    这样子后想看底部的信息时总是看不到!
    支持(1反对(0回复

发表留言