小程序模板网

首页 小程序模板网 开发文档 小程序开发教程正文

微信小程序仿android fragment可滑动的底部导航栏

发布时间：2017-12-02 17:05 所属栏目：小程序开发教程

底部3-5个选项的底部导航栏，目前在移动端上是主流布局之一因此腾讯官方特地做了，可以通过设置，就可以做出了一个底部的导航栏但是通过设置的这个底部的导航栏，功能上比较固定 ...

 
 
 

底部3-5个选项的底部导航栏，目前在移动端上是主流布局之一 
因此腾讯官方特地做了，可以通过设置，就可以做出了一个底部的导航栏 
但是通过设置的这个底部的导航栏，功能上比较固定，它必须要设置与它对应的一个页面，而且并不能滑动。
在业务上，有时候会比较限制，并不能完全满足所需。

因此自定义就有这个必要性

下面介绍这个仿Android fragment可滑动的底部导航栏如何实现

下面介绍这个仿android fragment可滑动的底部导航栏如何实现

 

项目最终效果图：

 

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.             "习近平主持中央财经领导小组第十五次会议",  
  8.             "李克强打叉的“万里审批图”成历史",  
  9.             "新疆自治区举行反恐维稳誓师大会",  
  10.             "朝鲜代表团抵达马来西亚处理金正男遇害案",  
  11.             "宝马车祸案肇事者二次精神鉴定:案发为精神病状态",  
  12.             "朝鲜代表团抵达马来西亚处理金正男遇害案",  
  13.             "宝马车祸案肇事者二次精神鉴定:案发为精神病状态",  
  14.             "朝鲜代表团抵达马来西亚处理金正男遇害案",  
  15.             "宝马车祸案肇事者二次精神鉴定:案发为精神病状态",  
  16.             "朝鲜代表团抵达马来西亚处理金正男遇害案",  
  17.             "宝马车祸案肇事者二次精神鉴定:案发为精神病状态",  
  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.         //获取系统信息  
  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. })  


易优小程序（企业版）+灵活api+前后代码开源 码云仓库:starfork
本文地址：https://www.eyoucms.com/wxmini/doc/course/18031.html 复制链接 如需定制请联系易优客服咨询：800182392 点击咨询

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

产品

服务

帮助

关于

工作日 8:30-12:00 14:30-18:00
周六及部分节假日提供值班服务

联系我们
QQ在线咨询