小程序模板網(wǎng)

微信小程序仿android fragment可滑動的底部導航欄

發(fā)布時間：2017-12-02 17:05 所屬欄目：小程序開發(fā)教程

底部3-5個選項的底部導航欄，目前在移動端上是主流布局之一因此騰訊官方特地做了，可以通過設置，就可以做出了一個底部的導航欄但是通過設置的這個底部的導航欄，功能上比較固定 ...

 
 
 

底部3-5個選項的底部導航欄，目前在移動端上是主流布局之一 
因此騰訊官方特地做了，可以通過設置，就可以做出了一個底部的導航欄 
但是通過設置的這個底部的導航欄，功能上比較固定，它必須要設置與它對應的一個頁面，而且并不能滑動。
在業(yè)務上，有時候會比較限制，并不能完全滿足所需。

因此自定義就有這個必要性

下面介紹這個仿Android fragment可滑動的底部導航欄如何實現(xiàn)

下面介紹這個仿android fragment可滑動的底部導航欄如何實現(xiàn)

 

項目最終效果圖：

 

wxml：

 

[html] view plain copy
 
  1. <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 51}}px" bindchange="bindChange">  
  2.   
  3.   <!-- frag01 -->  
  4.   <swiper-item>  
  5.     <scroll-view class="hot-box" scroll-y="true" upper-threshold="50" lower-threshold="100" bindscrolltolower="scrolltolower">  
  6.   
  7.       <!-- 列表 -->  
  8.       <view class="themes-list">  
  9.         <view class="themes-list-box" wx:for="{{datalists}}">  
  10.           <view class="themes-list-main">  
  11.             <view class="themes-list-name">{{item}}</view>  
  12.           </view>  
  13.         </view>  
  14.       </view>  
  15.     </scroll-view>  
  16.   </swiper-item>  
  17.   
  18.   <!-- grag02 -->  
  19.   <swiper-item>  
  20.     <scroll-view class="hot-box" scroll-y="true" upper-threshold="50" lower-threshold="100" bindscrolltolower="scrolltolower">  
  21.   
  22.       <!-- 列表 -->  
  23.       <view class="themes-list">  
  24.         <view class="themes-list-box" wx:for="{{reslists}}">  
  25.           <view class="themes-list-main">  
  26.             <view class="themes-list-name">{{item}}</view>  
  27.           </view>  
  28.         </view>  
  29.       </view>  
  30.     </scroll-view>  
  31.   </swiper-item>  
  32.   
  33.   <!-- grag03 -->  
  34.   <swiper-item>  
  35.     <scroll-view class="hot-box" scroll-y="true" upper-threshold="50" lower-threshold="100" bindscrolltolower="scrolltolower">  
  36.   
  37.       <!-- 列表 -->  
  38.       <view class="themes-list">  
  39.         <view class="themes-list-box" wx:for="{{datalists}}">  
  40.           <view class="themes-list-main">  
  41.             <view class="themes-list-name">{{item}}</view>  
  42.           </view>  
  43.         </view>  
  44.       </view>  
  45.     </scroll-view>  
  46.   </swiper-item>  
  47.   
  48.   <!-- grag02 -->  
  49.   <swiper-item>  
  50.     <scroll-view class="hot-box" scroll-y="true" upper-threshold="50" lower-threshold="100" bindscrolltolower="scrolltolower">  
  51.   
  52.       <!-- 列表 -->  
  53.       <view class="themes-list">  
  54.         <view class="themes-list-box" wx:for="{{reslists}}">  
  55.           <view class="themes-list-main">  
  56.             <view class="themes-list-name">{{item}}</view>  
  57.           </view>  
  58.         </view>  
  59.       </view>  
  60.     </scroll-view>  
  61.   </swiper-item>  
  62. </swiper>  
  63.   
  64. <!--tab_top-->  
  65. <view class="swiper-tab">  
  66.   <view class="swiper-tab-list {{currentTab==0 ? 'active' : ''}}" data-current="0" bindtap="swichNav">  
  67.     <view class="swiper-tab-img"><image class="img" src="{{currentTab==0 ? iconlists[0].focus: iconlists[0].normal}}"></image></view>  
  68.     <view>frag01</view>  
  69.   </view>  
  70.   <view class="swiper-tab-list {{currentTab==1 ? 'active' : ''}}" data-current="1" bindtap="swichNav">  
  71.      <view class="swiper-tab-img"><image class="img" src="{{currentTab==1 ? iconlists[1].focus: iconlists[1].normal}}"></image></view>  
  72.     <view>frag02</view>  
  73.   </view>  
  74.   <view class="swiper-tab-list {{currentTab==2 ? 'active' : ''}}" data-current="2" bindtap="swichNav">  
  75.      <view class="swiper-tab-img"><image class="img" src="{{currentTab==2 ? iconlists[2].focus: iconlists[2].normal}}"></image></view>  
  76.     <view>frag03</view>  
  77.   </view>  
  78.   <view class="swiper-tab-list {{currentTab==3 ? 'active' : ''}}" data-current="3" bindtap="swichNav">  
  79.      <view class="swiper-tab-img"><image class="img" src="{{currentTab==3 ? iconlists[3].focus: iconlists[3].normal}}"></image></view>  
  80.     <view>frag04</view>  
  81.   </view>  
  82. </view>  


 

 

wxss：

 

[css] view plain copy
 
  1. /*swiper*/  
  2. .swiper-box {  
  3.   display: block;  
  4.   height: 100%;  
  5.   width: 100%;  
  6.   overflow: hidden;  
  7. }  
  8. .hot-box {  
  9.   display: block;  
  10.   height: 100%;  
  11.   font-family: Helvetica;  
  12. }  
  13. /* list */  
  14. .themes-list {  
  15.   background: #fff;  
  16.   display: block;  
  17.   margin-bottom: 20px;  
  18. }  
  19. .themes-list-box {  
  20.   display: block;  
  21.   position: relative;  
  22.   padding: 16px 20px;  
  23.   border-bottom: 1px solid #f2f2f2;  
  24. }  
  25. .themes-list-main {  
  26.   margin-left: 1px;  
  27. }  
  28. .themes-list-name {  
  29.   font-size: 14px;  
  30.   color: #444;  
  31.   height: 20px;  
  32.   line-height: 20px;  
  33.   overflow: hidden;  
  34. }  
  35. /*tab*/  
  36. .swiper-tab {  
  37.   height: 50px;  
  38.   background: #fff;  
  39.   display: flex;  
  40.   position: relative;  
  41.   z-index: 2;  
  42.   flex-direction: row;  
  43.   justify-content: center;  
  44.   align-items: center;  
  45.   border-top: 1px solid #ccc;  
  46. }  
  47. .swiper-tab-list {  
  48.   margin: 0 20px;  
  49.   padding: 0 4px;  
  50.   font-size: 28rpx;  
  51.   font-family: Helvetica;  
  52. }  
  53. .active {  
  54.   /*border-bottom: 1px solid #FFCC00;*/  
  55.   color: #FFCC00;  
  56. }  
  57. .swiper-tab-img {  
  58.   text-align: center;  
  59. }  
  60. .img {  
  61.   width:23px;  
  62.   height: 23px;  
  63. }  



js：

 

 

[javascript] view plain copy
 
  1. Page( {  
  2.     data: {  
  3.         winWidth: 0,  
  4.         winHeight: 0,  
  5.         currentTab: 0,         
  6.         datalists : [  
  7.             "習近平主持中央財經(jīng)領導小組第十五次會議",  
  8.             "李克強打叉的“萬里審批圖”成歷史",  
  9.             "新疆自治區(qū)舉行反恐維穩(wěn)誓師大會",  
  10.             "朝鮮代表團抵達馬來西亞處理金正男遇害案",  
  11.             "寶馬車禍案肇事者二次精神鑒定:案發(fā)為精神病狀態(tài)",  
  12.             "朝鮮代表團抵達馬來西亞處理金正男遇害案",  
  13.             "寶馬車禍案肇事者二次精神鑒定:案發(fā)為精神病狀態(tài)",  
  14.             "朝鮮代表團抵達馬來西亞處理金正男遇害案",  
  15.             "寶馬車禍案肇事者二次精神鑒定:案發(fā)為精神病狀態(tài)",  
  16.             "朝鮮代表團抵達馬來西亞處理金正男遇害案",  
  17.             "寶馬車禍案肇事者二次精神鑒定:案發(fā)為精神病狀態(tài)",  
  18.             "砸鍋賣鐵！索尼是在走向毀滅 還是在奔向新生？"  
  19.         ],  
  20.         reslists:["hello","thank you for your read","if u feel good","can u give me good？"],  
  21.         iconlists:[  
  22.             {normal:"../../images/wp.png",focus:"../../images/wpselect.png"},  
  23.             {normal:"../../images/ss.png",focus:"../../images/ssselect.png"},  
  24.             {normal:"../../images/hc.png",focus:"../../images/hcselect.png"},  
  25.             {normal:"../../images/my.png",focus:"../../images/myselect.png"},  
  26.         ]  
  27.     },  
  28.     onLoad: function( options ) {  
  29.         var that = this;  
  30.         //獲取系統(tǒng)信息  
  31.         wx.getSystemInfo( {  
  32.             success: function( res ) {  
  33.                 that.setData( {  
  34.                     winWidth: res.windowWidth,  
  35.                     winHeight: res.windowHeight  
  36.                 });  
  37.             }  
  38.         });  
  39.     },  
  40.     /** 
  41.      * 滑動切換tab 
  42.      */  
  43.     bindChange: function( e ) {  
  44.         var that = this;  
  45.         that.setData( { currentTab: e.detail.current });  
  46.     },  
  47.     /** 
  48.      * 點擊切換tab 
  49.      */  
  50.     swichNav: function( e ) {  
  51.         console.log(e)  
  52.         var that = this;  
  53.         if( this.data.currentTab === e.currentTarget.dataset.current ) {  
  54.             //點擊的是同一個，則不操作  
  55.             return false;  
  56.         } else {  
  57.             that.setData( {  
  58.                 currentTab: e.currentTarget.dataset.current  
  59.             })  
  60.         }  
  61.   
  62.     }  
  63. })  


易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址：http://22321a.com/wxmini/doc/course/18031.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢：800182392 點擊咨詢
QQ在線咨詢