滑动门+下滑加载更多详细图解
1723
9

<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" /}','{qb:url name="wap_member_homepage_reply_003" /}','{qb:url name="wap_member_homepage_reply_004" /}'); //不同的URL
function 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>

官方教程已经同步更新,其实很简单的 稍微用一点点心就可以发现规律了。 https://www.kancloud.cn/php168/x1_of_qibo/842761 

10
赏礼
赏钱
收藏
点击回复
      全部留言
  • 9
0 赏钱 赏礼回复
  • wr1688 风格开发者 消费:2593.25元 2019-08-17 13:30 13:30
    华为
    6楼
    老大,一直想找你,把这个滑动门改成bui的tab加载
0 赏钱 赏礼回复
  • wr1688 风格开发者 消费:2593.25元 2019-06-29 19:40 19:40
    华为
    6楼
    为什么这段时间不见你了
0 赏钱 赏礼回复
  • 纳兰婕卿 普通粉丝 消费:19.9元 2019-06-29 15:17 15:176楼

     

0 赏钱 赏礼回复
  • wr1688 风格开发者 消费:2593.25元 2019-06-25 11:32 11:32
    华为
    6楼
    url能不能随栏目动态增加
0 赏钱 赏礼回复
  • wr1688 风格开发者 消费:2593.25元 2019-06-25 11:29 11:29
    华为
    6楼
0 赏钱 赏礼回复
  • aria 普通粉丝 消费:2460.49元 2019-06-25 11:29 11:296楼

    收藏了

0 赏钱 赏礼回复
  • snscn 普通粉丝 消费:1862.35元 2019-06-25 09:40 09:406楼

    收藏

0 赏钱 赏礼回复
  • 奋斗 普通粉丝 消费:11元 2019-06-25 08:53 08:536楼

    很详细的教程.

    感谢大神分享.

0 赏钱 赏礼回复
更多回复
恢复多功能编辑器
  • 3 1
  • Suifeng开发交流圈
        圈内贴子4104
    • 圈子成员433
    本圈子内的新贴

    推荐内容
    扫一扫访问手机版
    请选择要切换的马甲:

     
    网页即时交流
    QQ咨询
    咨询热线
    020-28998648