一、效果圖

image

二、涉及到組件

1.view組件

2.swiper組件

三、原理

整體來講是比較簡單的，頂部的navbar是使用flex進行布局的；下面的內(nèi)容區(qū)域則是使用到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的數(shù)據(jù) -->
<!-- 自定義組件 放在<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({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  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
    })
  }
})

本文完~，喜歡就點個贊唄。