类似百度图片的效果,滚动到底部后,点击加载更多,加载出第二页,第三页。。。
替代了传统的上一页,下一页,第几页,以达到在某些情况下使得用户体验更好。
二次开发方法:
1.先在模板文件中增加ajax文件夹,增加article_list.html模板文件:
{%forlist from=$array key=i%} <li><a title="{%$array[i].title%}" href="{%$array[i].link%}">{%$array[i].ctitle%}</a></li> {%/forlist%}
2.在列表页模板文件中,增加列表代码,和最重要的ajax代码:
<script id="panel-init"> function pageajaxlist() { var limit = $('#limit').val(); var nowpage = $('#nowpage').val(); var maxpage = $('#maxpage').val(); var limitstard = parseInt(nowpage) * limit; nowpage = parseInt(nowpage) + 1; $('#nowpage').val(nowpage); if (nowpage == maxpage){ $("#pagearticlelistbotton").hide(); } if (nowpage <= maxpage) { $.ajax({ type: "GET", url: "{%find:mlink class=1 out=article%}&tid={%$type.tid%}", data: "limitstard=" + limitstard + "&nowpage=" + nowpage + "&limit=" + limit, success: function(data) { $("#articlelist").append(data); } }); } } </script> <!--每页显示数量--> <input type="hidden" name="limit" id="limit" value="{%$limit%}"/> <!--数据总数量--> <input type="hidden" name="countnum" id="countnum" value="{%$countnum%}"/> <!--总翻页数量--> <input type="hidden" name="maxpage" id="maxpage" value="{%$maxpage%}"/> <!--当前翻页数--> <input type="hidden" name="nowpage" id="nowpage" value="1"/> <ul class="text_area"> <li class="list_divider">{%$type.typename%}</li> <li class="list_info"> <ul class="text_list" id="articlelist"> {%forlist from=$array key=i%} <li><a title="{%$array[i].title%}" href="{%$array[i].link%}">{%$array[i].ctitle%}</a></li> {%/forlist%} </ul> {%if $maxpage>1%} <a id="pagearticlelistbotton" data-theme="c" data-role="button" href="javascript:pageajaxlist();">查看更多</a> {%/if%} </li> </ul>