滑动门+下滑加载更多

![](https://box.kancloud.cn/ac54c72aeba13294fa5f9fe1faae0b36_525x320.jpg)
滑动门特效 
手指下滑,也可以异步加载更多

大家可以参考这个文件 `\template\member_style\default\member\user\index.htm`

示范代码如下

默认是两个按钮, 不同的频道 ,你可以添加多个按钮
~~~
.bbs_title h3{	width:50%;	float:left;	color:#999;	border-bottom:#ddd 1px solid; }.bbs_title h3 i{	color:#999;}.bbs_title h3.ck i{	color:#F90;	}.bbs_title h3.ck{	color:#f90;	border-bottom:#f90 1px solid; }					我发表的主题		我回复的贴子				{qb:tag name="wap_member_homepage_002" union="uid" type="bbs" rows="5" mid="1" order="id" by="desc"}		 {$i}、{$rs.title|get_word=24}</a>{:date("m-d",$rs.create_time)}	{/qb:tag}				{qb:tag name="wap_member_homepage_reply_002" js="bbs_content_reply" union="uid" type="cms" rows="5" mid="1" order="id" by="asc"}		 {$i}、{$rs.title|get_word=24}</a>{:date("m-d",$rs.create_time)}	{/qb:tag}	<script type="text/javascript">var type_num = 0; //默认是第一项$(document).ready(function () {	$(".bbs_title h3").click(function(){		$(".bbs_title h3").removeClass('ck');		$(this).addClass('ck');		type_num = $(this).index();		$(".SideInfos .show_content").hide();		$(".SideInfos .show_content").eq(type_num).show();		scroll_get = true;	//避免其它加载完了,这里却无法加载	});});var Mpage = new Array();	//页码数组var urldb = new Array('{qb:url name="wap_member_homepage_002" /}','{qb:url name="wap_member_homepage_reply_002" /}'); //不同的URLfunction ShowMoreBBs(){	if( typeof Mpage[type_num]=='undefined' ){		Mpage[type_num] = 1;	}	Mpage[type_num]++;	var url = urldb[type_num] + Mpage[type_num];		$.get(url,function(res){		if(res.code==0){			if(res.data==''){				layer.msg("已经显示完了！",{time:500});			}else{				$(".SideInfos .show_content").eq(type_num).append(res.data);				set_i_num();				scroll_get = true;			}		}else{			layer.msg(res.msg,{time:2500});		}	});}//滚动显示更多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});			ShowMoreBBs();		}	});});//设置标题序号function set_i_num(){	var j = 0;	$(".SideInfos .show_content").eq(type_num).find('ul span').each(function(){		j++;		$(this).html(j);	});}</script>
~~~

**下面图文部分由 suifeng 于2019年6月25日进行修编。**
![](https://box.kancloud.cn/dfab482f757d643e862af9eb8055b20f_1446x729.png)
![](https://box.kancloud.cn/ee32a96f3a8cddad371298c9c8866402_1800x701.png)
关键点就是上面的复制完成后 js部分这里也要加上对应的url即可
~~~
var urldb = new Array('{qb:url name="wap_member_homepage_002" /}','{qb:url name="wap_member_homepage_reply_002" /}','{qb:url name="wap_member_homepage_reply_003" /}','{qb:url name="wap_member_homepage_reply_004" /}'); //不同的URL
~~~

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

推荐滑动门+下滑加载更多

相关文章推荐

齐博X1教程专栏最新文章

齐博X1教程专栏文章推荐

建站工具推荐

您可能感兴趣的文章