微信小程序实现navbar导航栏

一、效果图

二、涉及到组件

1.view组件

2.swiper组件

三、原理

整体来讲是比较简单的，顶部的navbar是使用flex进行布局的；下面的内容区域则是使用到swiper组件，使用方式比较简单，可以查看微信小程序的文档。

四、代码

wxml：

 <view class="movie-container">
   <!-- 导航栏 -->
   <view class="navbar">
     <block wx:for="{{navbarTitle}}" wx:key="index">
       <view class="navbar-item {{navbarActiveIndex === index ? 'navbar-item-active' : ''}}" data-navbar-index="{{index}}" catchtap="onNavBarTap">
         <text>{{item}}</text>
       </view>
     </block>
   </view>
   <view class="movie-content-wrapper">
     <swiper current="{{navbarActiveIndex}}" bindanimationfinish="onBindAnimationFinish">
       <swiper-item wx:for="{{navbarTitle}}" wx:key="index">
         <scroll-view scroll-y="{{true}}">
           {{item}}
         </scroll-view>
       </swiper-item>
     </swiper>
   </view>
 </view>

wxss：

 .movie-container{
   display: flex;
   flex-direction: column;
 }
 .navbar{
   display: flex;
   position: absolute;
   left:;
   top:;
   z-index:;
   width: 100%;
   height: 50px;
   flex-direction: row;
   text-align: center;
   color: #A8A8A8;
   font-size: 15px;
   box-sizing: border-box;
   background-color: #FFF;
   border-bottom: 1rpx solid #DFDFDF;
 }
 .navbar-item{
   flex:;
   padding: 26rpx 0px;
 }
 .navbar-item-active{
   transition: all 0.3s;
   border-bottom: 10rpx solid #494949;
   color: #494949;
 }

 .movie-content-wrapper{
   padding-top: 50px;
 }

js:

 Page({

   /**
    * 页面的初始数据
    */
   data: {
     navbarActiveIndex: 0,
     navbarTitle: [
       "热映",
       "Top250",
       "口碑榜",
       "新片榜"
     ]
   },

   /**
    * 点击导航栏
    */
   onNavBarTap: function (event) {
     // 获取点击的navbar的index
     let navbarTapIndex = event.currentTarget.dataset.navbarIndex
     // 设置data属性中的navbarActiveIndex为当前点击的navbar
     this.setData({
       navbarActiveIndex: navbarTapIndex
     })
   },

   /**
    *
    */
   onBindAnimationFinish: function ({detail}) {
     // 设置data属性中的navbarActiveIndex为当前点击的navbar
     this.setData({
       navbarActiveIndex: detail.current
     })
   }
 })

代码比较简单，记录学习一下。