午夜91福利视频,午夜成人在线观看,午夜在线视频免费观看,午夜福利短视频,精品午夜成人免费视频APP

小程序模板網

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

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

底部(bu)(bu)3-5個(ge)選項的底部(bu)(bu)導(dao)航欄(lan)，目前在移動(dong)端上(shang)是主流布局之一因此騰(teng)訊(xun)官方特(te)地做了(le)，可以通(tong)過(guo)設置，就可以做出了(le)一個(ge)底部(bu)(bu)的導(dao)航欄(lan)但是通(tong)過(guo)設置的這個(ge)底部(bu)(bu)的導(dao)航欄(lan)，功能上(shang)比較固定 ...

 
 
 

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

因此自(zi)定(ding)義就有這(zhe)個必要性

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

下面介紹這個(ge)仿android fragment可滑動(dong)的底部(bu)導航欄如何實現(xian)

 

項目(mu)最終(zhong)效果圖：

 

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.       <!-- 列(lie)表 -->  
  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.       &nbsp; winHeight: 0,  
  5.         currentTab: 0,  ;       
  6.         datalists : [ &nbsp;
  7.             &quot;習近(jin)平主持中央財經(jing)領(ling)導小組第十五次(ci)會議",  
  8.             "李克(ke)強打(da)叉的“萬(wan)里(li)審批圖”成歷史&quot;,  
  9.             "新疆(jiang)自治(zhi)區(qu)舉(ju)行反(fan)恐維穩誓師大會",  
  10.             "朝鮮代表團抵達馬來西亞處理金(jin)正男(nan)遇害案",  
  11.             "寶馬車(che)禍案肇事(shi)者二次精(jing)神鑒(jian)定:案發(fa)為精(jing)神病狀態",  
  12.             "朝鮮代表團抵達馬(ma)來西亞處理金正男(nan)遇害案",  
  13.             "寶(bao)馬車禍案肇事者(zhe)二(er)次精(jing)(jing)神鑒定:案發為精(jing)(jing)神病狀態",  
  14.             "朝鮮代(dai)表團抵達(da)馬(ma)來西亞處理(li)金正男遇害案(an)",  
  15.             "寶馬(ma)車禍案肇(zhao)事者(zhe)二(er)次精(jing)神(shen)鑒定:案發為精(jing)神(shen)病狀態",  
  16.             "朝鮮代表團抵達馬來西亞處理(li)金正(zheng)男(nan)遇害案(an)",  
  17.             "寶(bao)馬(ma)車禍案肇事者二次精神(shen)鑒定:案發為精神(shen)病狀態(tai)",  
  18.             "砸鍋賣鐵(tie)！索尼(ni)是在(zai)走(zou)向毀滅(mie) 還是在(zai)奔向新生(sheng)？"  
  19.        &nbsp;],  
  20.         reslists:["hello","thank you for your read","if u feel good","can u give me ;good？"],  
  21.         iconlists:[&nbsp;&nbsp;
  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.   ;  &nbsp;   ]  
  27.     },  
  28.     onLoad: function( options ) {  
  29.         var that = this;  
  30.         //獲(huo)取(qu)系統信(xin)息(xi)  
  31.   &nbsp;   &nbsp; wx.getSystemInfo( {  
  32.             success: function( res ) {  
  33.           &nbsp;     that.setData( {  
  34.        &nbsp;           &nbsp;winWidth: res.windowWidth,  
  35.           &nbsp;         winHeight: res.windowHeight  
  36.  &nbsp;              });  
  37.             }  
  38.         });  
  39.     },  
  40.     /** 
  41.      * 滑動切(qie)換tab 
  42.      */  
  43.     bindChange: function( e ) {  
  44.         var that = this;  
  45.         that.setData( { currentTab: e.detail.current });  
  46.     },  
  47.     /** 
  48.      * 點擊切換(huan)tab 
  49.      */  
  50.     swichNav: function( e ) {  
  51.        &nbsp;console.log(e)&nbsp; 
  52.         var that = this;  
  53.         if( this.data.currentTab === e.currentTarget.dataset.current ) {  
  54.             //點擊(ji)的是(shi)同一個(ge)，則不操作(zuo)  
  55.             return false;  
  56.         } else {  
  57. &nbsp;           that.setData( {  
  58.                 currentTab: e.currentTarget.dataset.current  
  59.    &nbsp;        })  
  60.  ;  &nbsp;    }  
  61.   
  62.     }  
  63. })  


易優小程序（企業版）+靈活(huo)api+前后(hou)代碼開源 碼云倉庫:
本文地址：//www.jinyoudianli.com/wxmini/doc/course/18031.html 復制鏈接 如需(xu)定制請聯系易優客服咨(zi)詢(xun)：

工作日 8:30-12:00 14:30-18:00
周六及部分節假(jia)日提供(gong)值班服務

易(yi)小優
轉人工 ×