联系官方销售客服

1835022288

028-61286886

POSCMS分享经验 版主:论坛审计组
infinite-scroll插件 ajax加载更多教程
类型:POSCMS 更新时间:2020-04-21 16:41:11

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