业务经理

微信扫描以上二维码

028-61286886

技术咨询

infinite-scroll插件 ajax加载更多教程

开源系统 更新 2020-04-21 16:41:11 18713158902

第一种(个人强烈推荐的)  infinite-scroll 插件

使用方法应该有很多人比我更了解。(写给不了解的人看的)

<script type='text/javascript' src='/js/jquery.js?ver=0.3'></script>    
<script src="/js/jquery-ias.min.js" type="text/javascript"></script> 
//在此之前必须先加载jq库以及infinite-scroll插件 路径别错了
//infinite-scroll 下载地址看下面   
<script type="text/javascript"> 
var ias = $.ias({    
	container: ".listbox", //包含所有文章的元素    
	item: ".item", //对应的每篇文章元素    
	pagination: ".pagelist", //对应下面的分页元素    
	next: " .pagelist a[rel^=next] ", //下一页元素
	//这里是亮点了,也是我想了半天解决的。 
	//poscms分页里面 下一页带了 rel="next" 所以这个是获取.pagelist类下面的rel元素next的    
});    
ias.extension(new IASSpinnerExtension({    
	src: "http://www.dedediy.com/img/load.gif",    
	html: '<p style="text-align: center;"><img src="{src}"/></p>'    
}));    
ias.extension(new IASTriggerExtension({    
	text: '点击加载更多', //此选项为需要点击时的文字    
	html: '<p style="text-align: center; cursor: pointer;"><a>{text}</a></p>',    
	offset: !1, //设置此项后,到 offset:2 页之后需要手动点击才能加载,offset:!1 则一直为无限加载    
}));    
ias.extension(new IASNoneLeftExtension({    
	text: '已经加载完成!', // 加载完成时的提示    
	html: '<p style="text-align: center; cursor: pointer;"><a>{text}</a></p>',    
}));    
</script>

js.zip

下面的分页 代码 就不需要我来教了

http://help.xunruicms.com/21.html

{list action=module module=news page=1 pagesize=10 urlrule=index.php?page=[page]}
<li class="item">{$t.title}</li>
{/list}
<div class="pagelist"> {$pages} </div>


方案

  • 18713158902 #1 · 2017-05-07 11:28:33
    满意答案
    自己回复自己一下
  • 18713158902 #2 · 2017-05-07 11:28:34
    感谢大家给我解决此问题,我已经完美的解决
  • yt8778052 #3 · 2017-08-21 12:25:30
    make 一下
  • 九天网络(JiuDay) #4 · 2017-09-28 23:43:44
    000
  • 周大帅 #5 · 2017-12-07 20:30:45
    能实现不用手动点加载,滚动到底部自动加载的效果吗?
  • 沙洲 #6 · 2018-03-06 16:08:03
    没调用出来,能给个完整包吗?
  • 天枫 #7 · 2018-11-01 10:39:35
    标记一下,正需要
  • 小黄人 18html.com #8 · 2020-04-21 12:54:35
    应该放个效果截图看看
  • 九天网络(JiuDay) #9 · 2020-04-21 15:44:33
  • 九天网络(JiuDay) #10 · 2020-04-21 15:48:44
    http://poscms4.ew98.com/wenzhang演示网址 自行去看哈
  • 深丶秋 #11 · 2020-04-21 16:41:11
    打个标记

迅睿系统漏洞

多语言翻译Seolang
多语言翻译Seolang(2026-09-21)
1. 新增译文数据备份恢复页面,支持断点续传 2. 多语言声明中心...
AI文章生成器
AI文章生成器(2026-09-20)
任务拆分独立配置 新增AI生成关键词 新增指令模板 新增品牌信...
GEO系统
GEO系统(2026-09-20)
后台 AEO 与运营端对齐:区域、跑批、CSV、补强、剧本均可在迅睿...
GeoSeo工具箱
GeoSeo工具箱(2026-09-18)
修正菜单规范
后台二次登陆验证
后台二次登陆验证(2026-09-18)
新增邮箱验证 新增短信验证
京东云短信
京东云短信(2026-09-17)
- 验证码有效期改只读展示 - 有效期旁新增系统设置按钮 - 保...
创蓝短信
创蓝短信(2026-09-17)
- 验证码有效期改只读展示 - 有效期旁新增系统设置按钮 - 保...
火山引擎短信
火山引擎短信(2026-09-17)
- 验证码有效期改只读展示 - 有效期旁新增系统设置按钮 - 保...
外贸多语言建站
外贸多语言建站(2026-09-17)
优化独立内容过滤机制