dede列表页点击“加载更多”追加显示内容方法
我们在用dede建网站的时候,在手机端使用跟pc端一样的分页,功能固然能达到,但用户体验毕竟不好,在手机端最好还是用上拉加载或者点击加载比较方便,不用担心点击不准确。如下图情况:
这里我制作一次点击加载,方法如下:
首先我们需要在dede模版页面引用jquery.masonry.min.js插件,这个插件是专门用来制作瀑布流效果的。
<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/jquery.masonry.min.js"></script>
该页面前端如下:
<section> <div class="content"> <ul id="content"> //此处content对应下面js代码的第四行的#content {dede:list pagesize='3' } <li class="post"> //此处post对应下面js代码的find(".post") <a href="[field:arcurl function='GetWapUrl(@me)'/]">[field:title/]</a><time>[field:pubdate function="MyDate('Y-m-d',@me)"/] </time> </li> {/dede:list} </ul> </div> </section> <div class="button"> <button> <div class="next_page" style="font-size:17px;"> <span id="dianhuafei">加载更多</span> //此处dianhuafei对应下面js代码的点击事件 <div style="display:none;"> {dede:pagelist listitem="next" function='GetWapUrl(@me)/}</div> </div> </button> </div>
然后再页面最下面写上js代码
// JavaScript Document $(function(){ //对content使用masonry插件 $('#content').masonry({ itemSelector : '.post', columnWidth : 251 }); //首先给窗口绑定事件scroll $("#dianhuafei").click(function() { // 然后判断窗口的滚动条是否接近页面底部,这里的20可以自定义 var link = $(".next_page a"); //首先取得下一页的链接地址 var href = link.attr("href"); //判断下一页的链接地址是否存在 if (href != undefined) { //如果存在的话,用ajax获取数据 $.ajax({ type: "get", url: href, success: function(data) { //将返回的数据进行处理,挑选出class是post的内容块 var $res = $(data).find(".post"); //结合masonry插件,将内容append进ID是content的内容块中 $("#content").append($res).masonry('appended', $res); //newHref获取返回的内容中的下一页的链接地址 var newHref = $(data).find(".next_page a").attr("href"); //判断下一页地址是否存在,如果存在,替换当前页的链接地址。不存在,将当前页链接地址属性href移除,并替换内容为"下一页没有了" if (newHref != undefined) { link.attr("href", newHref); } else { $("#dianhuafei").html("已经是最后一页了"); link.html("下一页没有了").removeAttr("href"); }; } }); }; //返回false,使得点击进入新页面失效 return false; }) });