微信小程序之自定義導航欄（可實現動態添加）以及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:for-item="item" wx:key="{{item.id}}" >
        <scroll-view scroll-y="{{true}}">
          <view wx:for="{{item.navbarTitle2}}" wx:for-item="items" wx:key="{{items.id}}">
          {{items.name}}
          </view>
        </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: 120rpx;
  flex-direction: row;
  text-align: center;
  color: #A8A8A8;
  font-size: 15px;
  box-sizing: border-box;
  background-color: #FFF;

  overflow: hidden;
  line-height: 80rpx;
  white-space: nowrap;

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

.movie-content-wrapper{
  padding-top: 150rpx;
}

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    navbarActiveIndex: 0,
    navScrollLeft: 0,
    navbarTitle: [
      "1",
      "2",
      "3",
      "4",
      "5",
      "6",
      "7"
    ],
    navbarTitle1: [
      { id: 0, navbarTitle2: [{ id: 0, name: "1" }, { id: 1, name: "2" },]},
      { id: 1, navbarTitle2: [{ id: 0, name: "3" }, { id: 1, name: "33" },] },
      { id: 2, navbarTitle2: [{ id: 0, name: "4" }, { id: 1, name: "44" },] },
      { id: 3, navbarTitle2: [{ id: 0, name: "5" }, { id: 1, name: "55" },] },
      { id: 4, navbarTitle2: [{ id: 0, name: "6" }, { id: 1, name: "66" },] },
      { id: 5, navbarTitle2: [{ id: 0, name: "7" }, { id: 1, name: "77" },] },
     
    ]
  },
  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
      })
    }

  }
})

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