大家可以看看下圖中分別圈起來的地方. 可以根據用戶是否有對應的數據,就顯示或者隱藏起來. 同時這些頻道的數據,都是異步加載更新的,也可以下拉顯示更多. 默認放了幾個頻道.大家可以參考源代碼,可以放更多的頻道. 并不會影響頁面的打開速度.都是異步加載的. 這樣異步更新.可以給到用戶更好的體驗.   參考代碼如下: ~~~ <style type="text/css"> .title-btn .cnt-box{ display:none; } .title-btn .cnt_bbs{ display:block; /*默認顯示論壇的數據*/ } .title-btn .head{ height:31px; } .title-btn .tag{ padding-left:15px; padding-right:15px; } .title-btn .ck{ color:#133CD7; border-bottom:1px solid #133CD7; } .swiper-slide{width: auto!important;} /*滑動按鈕必須的設置,其中swiper-slide類名不能更換*/ </style> <!-- 滑動按鈕要用到的CSS與JS文件,他涉及到三個class類 swiper-container swiper-wrapper swiper-slide --> <link href="__STATIC__/libs/swiper/swiper.min.css" rel="stylesheet"> <script src="__STATIC__/libs/swiper/swiper.min.js"></script> <script> $(function () { var swiper = new Swiper('.swiper-container', { spaceBetween: 0, slidesPerView:'auto', freeMode: true }); }) </script> <div class="SideBox title-btn"> <!--切換菜單開始--> <div class="head"> <div class="swiper-container"> <div class="swiper-wrapper"> <span class="tag swiper-slide ck" data-type="cnt_bbs">__QUN__話題</span> {if modules_config('appstore')}<span class="tag swiper-slide" data-type="cnt_appstore">{:modules_config('appstore')['name']}</span>{/if} {if modules_config('booking')}<span class="tag swiper-slide" data-type="cnt_booking">{:modules_config('booking')['name']}</span>{/if} {if modules_config('shop')}<span class="tag swiper-slide" data-type="cnt_shop">{:modules_config('shop')['name']}</span>{/if} {if modules_config('cms')}<span class="tag swiper-slide" data-type="cnt_news">{:model_config(1,'cms')['title']}</span>{/if} {if modules_config('cms')}<span class="tag swiper-slide" data-type="cnt_photo">{:model_config(2,'cms')['title']}</span>{/if} </div> </div> </div> <!--切換菜單結束--> <!--論壇開始--> <div class="cnt-box cnt_bbs listBbs"> {qb:hy name="qun_wapshow_bbs001" type="bbs" where="ext_id=$id" order="qun_status desc,list desc" rows="8" } <div class="lists"> <ul> <li class="img"><a href="{$rs.user_url}"><img src="{$rs.user_icon}" onerror="this.src='__STATIC__/images/nopic.png'"></a></li> <li class="info"><span>{$rs.username}</span><em>{$rs.time}</em></li> <li class="more"><span>{if ($rs.status>1)}精{elseif (time()-$rs.create_time<3600*24)}新{elseif ($rs.view>10)}熱{/if}</span></li> </ul> <a href="{$rs.url}"> <dl> <dt>{$rs.title}</dt> {if (count($rs.picurls)>2)} <dd> {volist name="$rs.picurls" id="pic"} {lt name="i" value="4"} <div><span><img src="{$pic.picurl}"onerror="this.src='__STATIC__/images/nopic.png'" width="78" height="78" /></span></div> {/lt} {/volist} </dd> {/if} </dl> </a> <div class="others"> <span><i class="fa fa-thumbs-o-up">{$rs.agree}</i></span> <em><i class="fa fa-commenting-o">{$rs.replynum}</i></em> <em><i class="glyphicon glyphicon-remove-sign act-delete" data-id="{$rs.id}" data-uid="{$rs.uid}" data-sys="bbs"></i></em> <em><i class="fa fa-arrow-up act-top" data-id="{$rs.id}" data-type="{$rs.qun_status}" data-sys="bbs"></i></em> </div> </div> {/qb:hy} </div> <!--論壇結束--> <!--應用市場開始--> {if modules_config('appstore')} <div class="cnt-box cnt_appstore listPhoto"> {qb:hy name="qun_wapshow_appstore001" type="appstore" mid="-1" where="uid=$info.uid" order="id" by="desc" rows="6" js="cnt_appstore"} <li><a href="{$rs.url}"><span><img src="{$rs.picurl}" onerror="this.src='__STATIC__/images/nopic.png'"></span><em>{$rs.title}</em></a> </li> {/qb:hy} </div> {/if} <!--應用市場結束--> <!--商城開始--> {if modules_config('shop')} <div class="cnt-box cnt_shop listPhoto"> {qb:hy name="qun_wapshow_shop001" type="shop" mid="1" where="uid=$info.uid" order="id" by="desc" rows="6" js="cnt_shop"} <li><a href="{$rs.url}"><span><img src="{$rs.picurl}" onerror="this.src='__STATIC__/images/nopic.png'"></span><em>{$rs.title}</em></a> <i class="glyphicon glyphicon-remove-sign act-delete" data-id="{$rs.id}" data-uid="{$rs.uid}" data-sys="shop"></i> </li> {/qb:hy} </div> {/if} <!--商城結束--> <!--拼團開始--> {if modules_config('booking')} <div class="cnt-box cnt_booking listPhoto"> {qb:hy name="qun_wapshow_booking001" type="booking" mid="1" where="uid=$info.uid" order="id" by="desc" rows="6" js="cnt_booking"} <li><a href="{$rs.url}"><span><img src="{$rs.picurl}" onerror="this.src='__STATIC__/images/nopic.png'"></span><em>{$rs.title}</em></a> </li> {/qb:hy} </div> {/if} <!--拼團結束--> <!--圖片開始--> {if modules_config('cms')} <div class="cnt-box cnt_photo listPhoto"> {qb:hy name="qun_wapshow_photo001" type="cms" mid="2" where="uid=$info.uid" order="id" by="desc" rows="6" js="cnt_photo"} <li><a href="{$rs.url}"><span><img src="{$rs.picurl}" onerror="this.src='__STATIC__/images/nopic.png'"></span><em>{$rs.title}</em></a> </li> {/qb:hy} </div> {/if} <!--圖片結束--> <!--文章開始--> {if modules_config('cms')} <div class="cnt-box cnt_news listBbs"> {qb:hy name="qun_wapshow_news001" type="cms" mid="1" where="uid=$info.uid" order="id" by="desc" rows="8" js="cnt_news"} <div class="lists"> <ul> <li class="img"><a href="{$rs.user_url}"><img src="{$rs.user_icon}" onerror="this.src='__STATIC__/images/nopic.png'"></a></li> <li class="info"><span>{$rs.username}</span><em>{$rs.time}</em></li> <li class="more"><span>{if ($rs.status>1)}精{elseif (time()-$rs.create_time<3600*24)}新{elseif ($rs.view>10)}熱{/if}</span></li> </ul> <a href="{$rs.url}"> <dl> <dt>{$rs.title}</dt> {if (count($rs.picurls)>2)} <dd> {volist name="$rs.picurls" id="pic"} {lt name="i" value="4"} <div><span><img src="{$pic.picurl}"onerror="this.src='__STATIC__/images/nopic.png'" width="78" height="78" /></span></div> {/lt} {/volist} </dd> {/if} </dl> </a> </div> {/qb:hy} </div> {/if} <!--文章結束--> <!--<div class="ShowMore2" onclick='showMoreCnt()'><span>點擊查看更多</span></div>--> </div> </div> <script type="text/javascript"> //切換按鈕 $(function(){ $(".title-btn .swiper-slide").click(function(){ $(".title-btn .swiper-slide").removeClass('ck'); $(this).addClass('ck'); now_type = $(this).data('type'); $('.title-btn .cnt-box').hide(); $('.title-btn .'+now_type).show(); scroll_get = true; //showMoreCnt(); }); }); var now_type = 'cnt_bbs'; //當前顯示的模塊 //加載每個頻道的分頁地址 var url_db = { cnt_bbs:"{qb:hy_url name='qun_wapshow_bbs001' /}", cnt_shop:"{qb:hy_url name='qun_wapshow_shop001' /}", cnt_booking:"{qb:hy_url name='qun_wapshow_booking001' /}", cnt_news:"{qb:hy_url name='qun_wapshow_news001' /}", cnt_photo:"{qb:hy_url name='qun_wapshow_photo001' /}", cnt_appstore:"{qb:hy_url name='qun_wapshow_appstore001' /}", }; var page_db = {}; //每個頻道的頁碼數 function showMoreCnt(){ if(typeof(page_db[now_type])=='undefined'){ page_db[now_type] = 1; } page_db[now_type]++; var url = url_db[now_type] + page_db[now_type]; $.get(url,function(res){ if(res.code==0){ if(res.data==''){ if(page_db[now_type]>3)layer.msg("已經顯示完了！",{time:500}); //$('.ShowMore2').hide(); }else{ $('.title-btn .'+now_type).append(res.data); 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; if(typeof(page_db[now_type])>1)layer.msg('內容加截中,請稍候',{time:1500}); showMoreCnt(); } }); }); //異步處理,對應的數據不存在,就隱藏其按鈕 function cnt_shop(res){if(res.paginate.total==0){$(".swiper-slide[data-type='cnt_shop']").hide();}} function cnt_booking(res){if(res.paginate.total==0){$(".swiper-slide[data-type='cnt_booking']").hide();}} function cnt_appstore(res){if(res.paginate.total==0){$(".swiper-slide[data-type='cnt_appstore']").hide();}} function cnt_news(res){if(res.paginate.total==0){$(".swiper-slide[data-type='cnt_news']").hide();}} function cnt_photo(res){if(res.paginate.total==0){$(".swiper-slide[data-type='cnt_photo']").hide();}} //對論壇異步加載進來的數據做處理 function cnt_bbs(res){ if(res.code==0){ //數據加載成功后 act_delete(); act_top(); } } //貼子的刪除功能 function act_delete(){ var power = {if $userdb.groupid==3||$gid==2} true {else /} false {/if}; $(".act-delete").each(function(){ var that = $(this); if(power!=true && '{$userdb.uid}'!=that.data('uid')){ that.hide(); } var url = "{:urls('wxapp.act/delete')}?sysname=" + that.data('sys') + '&id=' + that.data('id'); that.click(function(){ layer.confirm('你確認要刪除嗎?',{btn:['確認刪除','取消'],},function(){ $.get(url,function(res){ layer.closeAll(); if(res.code==0){ layer.msg('刪除成功'); setTimeout(function(){ window.location.reload(); },500); }else{ layer.alert(res.msg); } }); }); }); }); } //貼子的置頂功能 function act_top(){ var power = {if $userdb.groupid==3||$gid==2} true {else /} false {/if}; $(".act-top").each(function(){ var that = $(this); if(power!=true){ that.hide(); } if(that.data('type')!='0'){ that.css({'color':'blue'}); } var url = "{:urls('wxapp.act/top')}?sysname=" + that.data('sys') + '&id=' + that.data('id'); that.click(function(){ layer.confirm('你確認執行置頂相關嗎?',{btn:['確認','取消'],},function(){ $.get(url,function(res){ layer.closeAll(); if(res.code==0){ layer.msg('執行成功'); setTimeout(function(){ window.location.reload(); },500); }else{ layer.alert(res.msg); } }); }); }); }); } act_top(); </script> ~~~ 如果要加入更多的頻道,注意有幾處地方要同時增加, 第一步,對應的加按鈕,次序無所謂 ~~~ <div class="swiper-wrapper"> <span class="tag swiper-slide ck" data-type="cnt_bbs">__QUN__話題</span> {if modules_config('appstore')}<span class="tag swiper-slide" data-type="cnt_appstore">{:modules_config('appstore')['name']}</span>{/if} {if modules_config('booking')}<span class="tag swiper-slide" data-type="cnt_booking">{:modules_config('booking')['name']}</span>{/if} {if modules_config('shop')}<span class="tag swiper-slide" data-type="cnt_shop">{:modules_config('shop')['name']}</span>{/if} {if modules_config('cms')}<span class="tag swiper-slide" data-type="cnt_news">{:model_config(1,'cms')['title']}</span>{/if} {if modules_config('cms')}<span class="tag swiper-slide" data-type="cnt_photo">{:model_config(2,'cms')['title']}</span>{/if} </div> ~~~ 第二步,對應的加數據調用顯示標簽及模板,次序也無所謂的 ~~~ <!--拼團開始--> {if modules_config('booking')} <div class="cnt-box cnt_booking listPhoto"> {qb:hy name="qun_wapshow_booking001" type="booking" mid="1" where="uid=$info.uid" order="id" by="desc" rows="6" js="cnt_booking"} <li><a href="{$rs.url}"><span><img src="{$rs.picurl}" onerror="this.src='__STATIC__/images/nopic.png'"></span><em>{$rs.title}</em></a> </li> {/qb:hy} </div> {/if} <!--拼團結束--> ~~~ 第三步,加分頁地址,如果你不想顯示分頁加載更多的話,可以不加 ~~~ var url_db = { cnt_bbs:"{qb:hy_url name='qun_wapshow_bbs001' /}", cnt_shop:"{qb:hy_url name='qun_wapshow_shop001' /}", cnt_booking:"{qb:hy_url name='qun_wapshow_booking001' /}", cnt_news:"{qb:hy_url name='qun_wapshow_news001' /}", cnt_photo:"{qb:hy_url name='qun_wapshow_photo001' /}", cnt_appstore:"{qb:hy_url name='qun_wapshow_appstore001' /}", }; ~~~ 第四步,根據該用戶是否有此頻道的數據,來顯示或者隱藏這個頻道的按鈕,不加的話,就不會隱藏.也就是說不有任何數據,也會顯示此按鈕 ~~~ function cnt_shop(res){if(res.paginate.total==0){$(".swiper-slide[data-type='cnt_shop']").hide();}} function cnt_booking(res){if(res.paginate.total==0){$(".swiper-slide[data-type='cnt_booking']").hide();}} function cnt_appstore(res){if(res.paginate.total==0){$(".swiper-slide[data-type='cnt_appstore']").hide();}} function cnt_news(res){if(res.paginate.total==0){$(".swiper-slide[data-type='cnt_news']").hide();}} function cnt_photo(res){if(res.paginate.total==0){$(".swiper-slide[data-type='cnt_photo']").hide();}} ~~~ 只要參考這四步,對應的加元素,就可以顯示其它頻道的數據了. 其中 `<div class="cnt-box cnt_bbs listBbs">` `<div class="cnt-box cnt_appstore listPhoto">` `cnt-box`是JS統一處理要用到的類 listBbs是文字排版的樣式類 listPhoto是圖片排版的樣式類 `cnt_bbs` `cnt_appstore` 這些就是不同頻道的關鍵字 這個是跟據用戶UID調用數據的, 你可以換位思考,把條件刪除,放在頻道主頁的話,同樣適用的.不過需要把標簽 qb:hy 全換替換為 qb:tag qb:hy_url 全換成qb:url