列表页制作及无滚动加载内容

点击查看大图

[![](https://box.kancloud.cn/66f51e3587c39a1ea140e8a8a3eaea8f_1736x854.png)](https://www.kancloud.cn/book/php168/x1_of_qibo/preview/images/56.png)

代码如下:
~~~

{qb:listpage name="bbs_list_page_pc" rows="20" order="list"}
		{$rs.title}</a> 
	{/qb:listpage}

//滚动显示更多
var scroll_get = true;	//做个标志,不要反反复复的加载
$(document).ready(function () {
	$(window).scroll(function () {
		if (scroll_get==true &&  (400 + $(window).scrollTop())>($(document).height() - $(window).height())) {
			scroll_get = false;
			layer.msg('内容加截中,请稍候',{time:1000});
			ShowMoreList();
		}
	});
});

</script>
~~~

下面这一段,就是齐博标签中的列表页标签代码
~~~

{qb:listpage name="bbs_list_page_pc" rows="20" order="list"}
		{$rs.title}</a> 
	{/qb:listpage}

~~~
他的标志就是 `{qb:listpage name="xxxx"}模板{/qb:listpage}`
而通用标签是`{qb:tag name="xxxx"}模板{/qb:tag}`
其它参数的用法都基本一样,这里就是唯一不同的地方即:冒号后面的几个字母

> {$pages}

这个是传统分页的代码,现在慢慢不太受喜欢了.体验比较差

> 查看更多

这个是点击事件,如果你使用了滚动事件的话,这个就没有存在的意义.

~~~
var Mpage = 1;
//显示更多
function ShowMoreList(){
	Mpage++;
	$.get('{qb:list_url name="bbs_list_page_pc" /}'+Mpage,function(res){
		if(res.code==0){
			if(res.data==''){
				layer.msg("已经显示完了！",{time:500});
			}else{
				$('.listpages').append(res.data);
				scroll_get = true;  //这一行仅仅是匹配滚动显示更多.如果没使用滚动特效,可以删除
			}
		}else{
			layer.msg(res.msg,{time:2500});
		}
	});
}
~~~

上面这一段是JS代码,大部分页面都可以套用的.`var Mpage = 1;`这个是页码默认表示当前已显示了第一页

> {qb:list_url name="bbs_list_page_pc" /}

### 这个代表分页网址,这也是齐博标签最特别的地方, 按以往,甚至现在很多同行, 为了实现分页显示数据,必须要单独做一个PHP文件写数据调用.而我们这里,只需要把显示标签的变量名复制到这里让他们一一对应,就可以解决了

这个分页网址标签在页面运行后,会转义成类似下面的网址
http://你的域名/index.php/bbs/content/ajax_get/name/bbs_list_page_pc/fid/16/mid/1/rows/20/order/list/by/desc/pagename/ec1e7a01/cache_time/0.html?page=
这个不需要你去记住,只是让大家知道,最后他会生成一个很特别的网址,带上各项参数并且以=号结尾,=号后面就必须要跟上页码数字

下面这一段,就是实现滚动显示更多的,如果你不想滚动显示更多,而想点击显示更多的话,就可以把下面这一段删除掉.

~~~
//滚动显示更多
var scroll_get = true;	//做个标志,不要反反复复的加载
$(document).ready(function () {
	$(window).scroll(function () {
		if (scroll_get==true &&  (400 + $(window).scrollTop())>($(document).height() - $(window).height())) {
			scroll_get = false;
			layer.msg('内容加截中,请稍候',{time:1000});
			ShowMoreList();
		}
	});
});
~~~

本文链接：https://x1.wanxiangsucai.com/read/202.html

推荐列表页制作及无滚动加载内容

相关文章推荐

齐博X1教程专栏最新文章

齐博X1教程专栏文章推荐

建站工具推荐

您可能感兴趣的文章