小程序做tab滑动切换功能

xwml部分

<!-- tab标题 -->
<scroll-view scroll-x="true" class="navbar-box">
 <block wx:for="{{recordMain}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
 <view class="nav-item {{currentTab == idx ? 'active' : ''}}" data-current="{{idx}}" bindtap="switchNav1">
  {{navItem.title}}
 </view>
 </block>
</scroll-view>

<swiper style="height:{{winHeight}}px;" class="tab-box" current="{{currentTab}}" duration="300" data-current="{{idx}}" bindchange="switchTab">
     <swiper-item style="height:100%;overflow-y:scroll;background-color: #fff;margin-top: 40px;" class="tab-cnetent">
        <view>111</view>
     </swiper-item>
     <swiper-item style="height:100%;overflow-y:scroll;background-color: #fff;margin-top: 40px;" class="tab-cnetent">
        <view>222</view>
     </swiper-item>
     <swiper-item style="height:100%;overflow-y:scroll;background-color: #fff;margin-top: 40px;" class="tab-cnetent">
        <view>333</view>
     </swiper-item>
</swiper>

scroll-view scroll-x="true"    横向滑动

current="{{currentTab}}"  滑动到第几个

js部分

  data: {
      recordMain: [
      {
      title: "进行中"
      },
      {
      title: "已完成"
      },
      {
      title: "个人记录"
      },
     currentTab: 0,
     navScrollLeft: 0,
     winWidth: 0,
     winHeight: 0, 
     ],


  }



// 滑动事件
 // 点击标题切换当前页时改变样式
 switchNav1:function(e) {
  console.log(e.currentTarget.dataset.current)
  var that = this
  var cur = e.currentTarget.dataset.current;
  if (that.data.currentTab == cur) {
   return false;
  } else {
   that.setData({
   currentTab: cur
   })
  }
  },
  // 滚动切换标签样式 
  switchTab: function(e) {
  console.log(e) 
  var that = this; 
  that.setData({
   currentTab: e.detail.current
  }); 
  
  
},

switchNav1 点击事件获取标题下标，更新currentTab的值

switchTab 获取滑动到底几个，打印e.detail.current可看到

wxss

/* tabar */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
 }
  
 .navbar-box {
  height: 70rpx;
  line-height: 70rpx;
  position: fixed;
  top: 0rpx;
  background: white;
  text-align: center;
  z-index: 99;
 }
  
 .nav-item {
  display: inline-block;
  width: 33.3%;
  text-align: center;
  border-radius: 6rpx;
 }
  
 .nav-item text {
  padding-bottom: 10rpx;
 }

  
 .active {
  color: #fff;
  background-color: #46A3FF;
  box-sizing: border-box;
 }