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

栏目: JavaScript · 发布时间: 5年前

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

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

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

Infinite Ajax Scroll目前的版本是2.3.0,个人用户可以免费使用。

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

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

举个例子。

一个页面的内容如下:

...

...

则 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 & "" & i & ""

在下面增加如下几行

elseif i=intNowPage + 1 then

strPageBar=Replace(strPageBar,"<#pagebar/page/url#>",s)

strPageBar=Replace(strPageBar,"<#pagebar/page/number#>",""&i&"")

strPageBar=Replace(strPageBar,"page-numbers","page-numbers next-page")

Template_PageBar=Template_PageBar & strPageBar

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

叠加体验:用互联网思维设计商业模式

叠加体验:用互联网思维设计商业模式

穆胜 / 机械工业出版社 / 2014-11 / 39.00

本书在互联网思维改变一切的背景下,详细介绍了如何运用互联网思维重构商业模式,主要包括以下内容:①互联网经济中的商业逻辑(即“互联网思维”),不仅给出了消费方面的逻辑变革,还给出了在生产端的逻辑变革以及“跨界”的逻辑变革。②给出了一个“三层产品体验模型”,厘清了互联网思维,打造完美终端、云端服务和价值群落三层体验,企业可以选择做不同层面的体验组合,这即是选择了不同的市场策略。但是,企业要基业长青,终......一起来看看 《叠加体验:用互联网思维设计商业模式》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具