微信小程序实现navbar导航栏

一、效果图

image

二、涉及到组件

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 " data-navbar-index="{{index}}" catchtap="onNavBarTap">
        <text>{{item}}</text>
      </view>
 <view class="line" style="width:{{100/navbarTitle.length}}%;transform:translateX({{100*navbarActiveIndex}}%);"></view>
    </block>
  </view>
  <view class="movie-content-wrapper">
    <swiper current="{{navbarActiveIndex}}" bindchange="onBindAnimationFinish">

 <!-- 这里可以自定义组件，我为了方便直接for的数据 -->
<!-- 自定义组件 放在<scroll-view>里面代替 {{item}}  -->
      <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: 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
    })
  }
})

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