🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
![](https://box.kancloud.cn/ac54c72aeba13294fa5f9fe1faae0b36_525x320.jpg) 滑动门特效 手指下滑,也可以异步加载更多 大家可以参考这个文件 `\template\member_style\default\member\user\index.htm` 示范代码如下 默认是两个按钮, 不同的频道 ,你可以添加多个按钮 ~~~ <style type="text/css"> .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; } </style> <div class="SideInfos"> <div class="bbs_title"> <!--这里可以是多个TAB按钮--> <h3 class="ck"><i class="fa fa-fw fa-file-text-o"></i>我发表的主题</h3> <h3><i class="fa fa-fw fa-file-text-o"></i>我回复的贴子</h3> </div> <!--上面若有多个TAB按钮,那下面也要对应多个,必须要命名为了 class="show_content" 其中的 bbs_content_reply 为的是异步加载用的, 可以不使用 --> <div class="show_content"> {qb:tag name="wap_member_homepage_002" union="uid" type="bbs" rows="5" mid="1" order="id" by="desc"} <ul> <ol style="width:80%;"><span>{$i}</span>、<a href="{$rs.url}">{$rs.title|get_word=24}</a></ol><li>{:date("m-d",$rs.create_time)}</li></ul> {/qb:tag} </div> <div class="show_content bbs_content_reply" style="display:none;"> <!--下面的标签添加js="bbs_content_reply"参数为的就是不影响页面打开速度。js名必须要与外层class名一样,但可以不与标签名一样--> {qb:tag name="wap_member_homepage_reply_002" js="bbs_content_reply" union="uid" type="cms" rows="5" mid="1" order="id" by="asc"} <ul> <ol style="width:80%;"><span>{$i}</span>、<a href="{$rs.url}">{$rs.title|get_word=24}</a></ol><li>{:date("m-d",$rs.create_time)}</li></ul> {/qb:tag} </div> </div> <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" /}'); //不同的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> ~~~ **下面图文部分由 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 ~~~