不使用输入框如何实现下拉_使用INFINITE AJAX SCROLL实现下拉加载效果

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

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

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

　　之后确认一下网站的框架结构，找到四个元素的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,"",s)
strPageBar=Replace(strPageBar,"",""&i&"")
strPageBar=Replace(strPageBar,"page-numbers","page-numbers next-page")
Template_PageBar=Template_PageBar & strPageBar

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

不使用输入框如何实现下拉_使用INFINITE AJAX SCROLL实现下拉加载效果相关推荐

jQuery模拟原生态App上拉刷新下拉加载效果代码
以下任意均可: 1. jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. 原文:http://www.sucaij ...
1.2文字排版、颜色、表格、图像形状、Jumbotron、信息提示框、按钮、按钮组、徽章、加载效果、分页、列表组、卡片、下拉菜单、折叠
Bootstrap 5 默认设置 Bootstrap 5 默认的 font-size 为 16px, line-height 为 1.5. 此外,所有的 <p> 元素 margin-top ...
下拉刷新和上拉加载 php,基于iscroll.js实现下拉刷新和上拉加载效果
现在已经不是纯Android独霸天下的时代了,H5嵌入Android的Hybrid混合开发是大势所趋.今天给大家带来的就是移动端中常见的"上拉刷新,下拉加载"特效,这个特效将会基于 ...
美团、点评、猫眼App下拉加载效果的源码分享
今天我准备拿大众点评.美团.猫眼电影三款App的实例来分享一下APICloud下拉加载这个模块的效果. 美团App下拉加载效果以美团中的下拉酷似动画的萌萌着小人儿效果作为参考,来实现的一个加载模块. ...
ajax瀑布流 dede,dedecms加载更多,无限下拉瀑布流插件
这篇教程会使用到Infinite Ajax Scroll插件,即无限的ajax滚动,当页面滚动到容器可见部分将自动异步加载数据. 插件的集成很简单,分以下几个步骤: 1.页面中引用jquery.js ...
swiper 上滑触发_四种方式快速实现上滑触底加载效果
在智能小程序的开发过程中,上拉加载是一种十分常见的加载效果,最近也收到了一些开发者在开发上拉加载时遇到的问题,今天的内容就为您介绍一下如果想实现下述效果的上拉加载,我们需要如何去做. 以下是为大家总结 ...
win7下计划任务schtasks使用详解及错误:无法加载列资源的解决方法1
win7下计划任务schtasks使用详解及"错误:无法加载列资源"的解决方法1 2011-12-10 20:33 schtasks 命令简述: 安排命令和程序,使其定期运行或在指 ...
vue网页预加载页面_页面预加载效果
vue网页预加载页面 View demo 查看演示Download Source 下载源 Today we want to show you how to create a very simple p ...
linux配置文件重新加载失败,linux下为什么每次修改完配置文件之后都需要重新加载配置文件...
解释了 linux下为什么每次修改完配置文件之后都需要重新加载配置文件目录一.关于inode 二.inode的作用二.为什么每次修改完服务器配置文件之后,都需要重新加载一下配置文件? 一.关于in ...

不使用输入框如何实现下拉_使用INFINITE AJAX SCROLL实现下拉加载效果

不使用输入框如何实现下拉_使用INFINITE AJAX SCROLL实现下拉加载效果相关推荐

最新文章

热门文章