业务经理

微信扫描以上二维码

028-61286886

技术咨询

瀑布流 读不到 rel

迅睿框架 更新 2020-12-30 09:46:16 webzzh

用以下代码做 瀑布流。 读不到  rel  这个东西啊

next: " .pagelist a[rel^=next] ", //下一页元素        
 //分页里面 下一页带了 rel="next" 所以这个是获取.pagelist类下面的rel元素next的

{xunruicms_img_title}



通过前端jq插件 infinite-scroll 实现ajax瀑布流加载

更新时间:2020-05-11 11:43:39 文档作者:九天网络 不会操作怎么办?

ajax瀑布流加载方案  有两种 一种是官方提供的

https://www.xunruicms.com/doc/534.html

另外一种便是通过我这种前端 jq插件 实现的 下面说方法

列表的调用案例

<ul class="listbox">  class="listbox" 对应下面的 container: ".listbox",
  {list action=module module=news page=1 pagesize=10  urlrule=index.php?page=[page]} 
    <li class="item">{$t.title}</li>  class="item" 对应下面的 item: ".item",
  {/list}
</ul>
<div class="pagelist"> {$pages} </div> class="pagelist" 对应下面的 pagination: ".pagelist",


下载 jq插件 infinite-scroll (在下面附件下载) 代码放在list循环之后

<script src="/static/default/ajax/js/jquery-ias.min.js" type="text/javascript"></script>     
<!-- 在此之前必须先加载jq库以及infinite-scroll插件 路径别错了 没有加载jq就用不了 -->    
<script type="text/javascript">     
var ias = $.ias({    
 container: ".listbox", //包含所有文章的元素    
 item: ".item", //对应的每篇文章元素    
 pagination: ".pagelist", //对应下面的分页元素    
 next: " .pagelist a[rel^=next] ", //下一页元素        
 //分页里面 下一页带了 rel="next" 所以这个是获取.pagelist类下面的rel元素next的    
});    
ias.extension(new IASSpinnerExtension({    
 src: "/static/default/ajax/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: 2, //设置此项后,到 offset:2 页之后需要手动点击才能加载,offset:!1 则一直为无限加载    
}));    
ias.extension(new IASNoneLeftExtension({    
 text: '已经加载完成!', // 加载完成时的提示    
 html: '<p style="text-align: center; cursor: pointer;"><a>{text}</a></p>',    
}));    
</script>


方案

  • 班主任 #1 · 2020-12-29 15:22:12
    满意答案
    没用过这个教程,我用官方的教程做的瀑布流,默认模板自带的有效果
  • webzzh #2 · 2020-12-29 16:09:16
    好吧。。我用官方的。我列表页用了。一直拉,一直加载,,都没数据了,也不提示已经加载完了。这是什么回事昵?
  • webzzh #3 · 2020-12-30 09:46:16
    @班主任:就用官方的了,方便~~

迅睿系统漏洞

外贸多语言建站
外贸多语言建站(2026-10-30)
修正对百度编辑器提取支持
AI文章生成器
AI文章生成器(2026-10-29)
任务插图设置数量
Bing站长数据
Bing站长数据(2026-10-29)
根据BING接口调整菜单 各个页面数据支持点击查看详情
按字段付费
按字段付费(2026-10-29)
按字段付费用于模块的字段设置一定的价格,当用户购买了此内容的字段时才...
泛解析站群系统
泛解析站群系统(2026-10-29)
AI队列增加清空按钮 表单提示语收敛 目录模式不接管主域名模板
账号注销
账号注销(2026-10-29)
用于用户中心的注销账号申请,后台审核通过后注销此账号。后台统一管理注...
邮件群发
邮件群发(2026-10-28)
修改模板的命名
自定义收款/捐款
自定义收款/捐款(2026-10-28)
自定义收款或捐款插件可以让用户快速创建付款或者捐款功能
CMS内容批量修改
CMS内容批量修改(2026-10-28)
后台批量修改文章内容的指定字段在插件后台可以任意指定字段
全站模块搜索
全站模块搜索(2026-10-28)
实现全模块一次性搜索内容,一键搜索全站内容精准搜索全部模块: