微信小程序之自定义导航栏（可实现动态添加）以及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:;
  top:;
  z-index:;
  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
      })
    }

  }
})

其实是参考网上诸位大神的一些代码自己通过修改而来的，能够从别人的代码进行修改以及学习变成自己所收获的一些知识也是本人的荣幸，很感谢百度博客的一些分享！！