微信小程序滑动导航栏切换页面

WXML

<view class="nav">
  <scroll-view scroll-x="{{true}}" class="scroll-view">
    <view style="display:inline-block" wx:for="{{navList}}" wx:key="index" class="nav-item {{index===currentIndex?'active':''}}" bindtap="switchNav" data-index="{{index}}">
      {{item.name}}
    </view>
  </scroll-view>
</view>

<view class="page-list">
  <swiper current="{{currentIndex}}" duration="{{300}}" bindchange="swiperChange">
    <swiper-item wx:for="{{navList}}" wx:key="index">
      <view class="page">
        <text>当前页面：{{item.name}}</text>
      </view>
    </swiper-item>
  </swiper>
</view>

WXSS

.nav {
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}

.nav-item {
  padding: 10px;
  color: #333;
}

.nav-item.active {
  color: #1aad19;
}

.scroll-view {
  white-space: nowrap;
  overflow-x: auto;
}

.page {
  height: 300px;
  text-align: center;
  font-size: 28rpx;
  line-height: 300px;
  color: #333;
}

.page-list {
  height: 300px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

JS

Page({

  data: {

    navList: [

      { id: 1, name: '页面1' },

      { id: 2, name: '页面2' },

      { id: 3, name: '页面3' }

    ],

    currentIndex: 0

  },

  switchNav: function (e) {

    this.setData({

      currentIndex: e.currentTarget.dataset.index

    })

  },

  swiperChange: function (e) {

    this.setData({

      currentIndex: e.detail.current

    })

  }

})