微信小程序实现navbar导航栏

一、效果图

image

二、涉及到组件

1.view组件

2.swiper组件

三、原理

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

四、代码

wxml：

  
  
    
     
        {{item}}
      
 
    
  
  
    

 

      
        
          {{item}}
        
      

    
  

wxss：

.movie-container{
  display: flex;
  flex-direction: column;
}
.navbar{
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 500;
  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: 1;
  padding: 26rpx 0px;
}
/* 下边框左右动画 */
.line{position: absolute;bottom: 0;left: 0;height: 4rpx;background: red;transition: all .3s ease-out .1s;}

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

JS:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    navbarActiveIndex: 0,
    navbarTitle: [
      "商品",
      "评论",
      "商家"
    ]
  },

  /**
   * 点击导航栏
   */
// 导航点击事件
  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
    })
  }
})

本文完~，喜欢就点个赞呗。