微信小程序之自定義導航欄（可實現動態添加）以及swiper（swiper-item）實現自動切換，導航標題也跟着切換

<view class="movie-container">
  <!-- 導航欄 -->
  <view >
  <scroll-view scroll-x="true" class="navbar" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
    <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>
    </scroll-view>
  </view>
  <!-- swiper-item -->
  <view class="movie-content-wrapper">
    <swiper current="{{navbarActiveIndex}}" bindanimationfinish="onBindAnimationFinish">
      <swiper-item wx:for="{{navbarTitle1}}" wx:key="index">
        <scroll-view scroll-y="{{true}}">
          {{item}}
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</view>

.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;
  overflow: hidden;
  line-height: 80rpx;
  white-space: nowrap;

}
.navbar-item{
   width: 25%;
  display: inline-block;
  text-align: center;
  padding: 26rpx 0px;
}
.navbar-item-active{
  transition: all 0.3s;
  border-bottom: 10rpx solid #494949;
  color: #494949;
}

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

　　

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    navbarActiveIndex: 0,
    navScrollLeft: 0,
    navbarTitle: [
      "1",
      "2",
      "3",
      "4",
      "5",
      "6",
      "7"
    ],
    navbarTitle1: [
      "1",
      "2",
      "3",
      "4",
      "5",
      "6",
      "7"
    ]
  },
  onLoad: function() {
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          pixelRatio: res.pixelRatio,
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      },
    })
  },
  /**
   * 點擊導航欄
   */
  onNavBarTap: function(event) {
    // 獲取點擊的navbar的index
    let navbarTapIndex = event.currentTarget.dataset.navbarIndex
    // 設置data屬性中的navbarActiveIndex爲當前點擊的navbar
    var singleNavWidth = this.data.windowWidth / 5;
    //tab選項居中                            
    this.setData({
      navScrollLeft: (navbarTapIndex - 2) * singleNavWidth
    })
    if (this.data.navbarActiveIndex == navbarTapIndex) {
      return false;
    } else {
      this.setData({
        navbarActiveIndex: navbarTapIndex
      })
    }
    // this.setData({
    //   navbarActiveIndex: navbarTapIndex
    // })
  },

  /**
   * 
   */
  onBindAnimationFinish: function({
    detail
  }) {
    // 設置data屬性中的navbarActiveIndex爲當前點擊的navbar
    let navbarTapIndex = detail.current;
    var singleNavWidth = this.data.windowWidth / 5;
    //tab選項居中                            
    this.setData({
      navScrollLeft: (navbarTapIndex - 2) * singleNavWidth
    })
    if (this.data.navbarActiveIndex == navbarTapIndex) {
      return false;
    } else {
      this.setData({
        navbarActiveIndex: detail.current
      })
    }

  }
})

　　實際上是參考網上諸位大神的一些代碼本身經過修改而來的，可以從別人的代碼進行修改以及學習變成本身所收穫的一些知識也是本人的榮幸，很感謝百度博客的一些分享！！