最近在写校园教务查询类微信小程序的时候，需要用到滚动/滑动Tab的效果。但是之前没有写过类似的特效，在网上找了一些资料并且看了官方文档，对于滑动切换的Tab特效进行了实现，下面是实现方法和相关代码展示。
首先看一下效果预览：

当然，下面的代码中只包含效果实现的框架，不包含图片中的搜索和图书样式，下面来看看是如何实现滑动Tab的样式把！
滑动Tab的实现只需要两个组件：（1）scroll-view（2）swiper
下面是.wxml页面的代码：

<view>
  <scroll-view scroll-x="true" class="tab_h" scroll-left="{{scrollLeft}}">
    <view class="tab_item {{currentTab==0?'active':''}}" style="border-right:2rpx solid #eee;" data-current="0" bindtap="swichNav">tab1</view>
    <view class="tab_item {{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav">tab2</view>
  </scroll-view>
  <swiper class="tab_content" current="{{currentTab}}" duration="300" bindchange="switchTab" style="height:{{winHeight}}rpx">
    <swiper-item>
      <scroll-view scroll-y="true" class="scroll_h">
        <view>
          <text>我是Tab1</text>
        </view>
      </scroll-view>
    </swiper-item>
    <swiper-item>
      <scroll-view scroll-y="true" class="scroll_h">
        <view>
          <text>我是Tab2</text>
        </view>
      </scroll-view>
    </swiper-item>
  </swiper>
</view>

代码简单解释一下：
Tab标题栏采用scroll-view组件，其中的属性很简单，“scroll-x”是控制横线滚动，“scroll-left”是滚动条的位置。因为我的项目只需要两个Tab页面，所以我在scroll-view下面只写了两个view，如果需要多个，也可以进行添加。
在这里我们采用一个currentTab变量来标识当前标题或者页面的顺序，在滑动切换的时候，会用到这个变量。Tab页面采用swiper嵌套scroll-view实现，为了实现自适应屏幕高度，在这里我采用了动态高度，设备的真实高度会在js里面计算出来，下面js部分的代码里有展示。
swiper相信大家很熟悉，轮播图是很多项目所必需的，所以不再详细介绍。在swiper嵌套的scroll-view里面，属性采用的是scroll-y竖向因为在这个部分可能会展示较多的内容需要向下滑动，注意：使用竖向滚动时，需要给scroll-view一个固定高度，我是在css里面进行高度控制。
.wxss页面的代码：

.tab_h{
  width: 100%;
  height: 92rpx;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 90rpx;
  color: grey;
  font-size: 30rpx;
  white-space: nowrap;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}
.tab_item{
  width: 374rpx;
  display: inline-block;
  text-align: center;
  border-bottom: 2rpx solid #eee;
}
.tab_item.active{
  color: #31B262;
  position: relative;
}
.tab_item.active:after{
  content: "";
  display: block;
  height: 8rpx;
  width: 120rpx;
  background: #31B262;
  position: absolute;
  bottom: 0;
  left: 127rpx;
  border-radius: 16rpx;
}
.tab_content{
  width: 100%;
  margin-top: 92rpx;
}
.scroll_h{
  width: 100%;
  height: 100%;
  background-color: #eee;
}

css代码就很简单了，要具体说明的是，这里的css代码也同样适用于Tab的title数量过多的情况，在tab_h样式中对于超出的部分进行了隐藏，下面的js代码中也有对数量多的title的情况的处理。
.js页面代码：

// pages/testpage/testpage.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    scrollLeft: 0,
    currentTab: 0,
    winHeight: ""
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this;
    //  高度自适应
    wx.getSystemInfo({
      success: function(res) {
        var clientHeight = res.windowHeight,
          clientWidth = res.windowWidth,
          rpxR = 750 / clientWidth;
        var calc = clientHeight * rpxR - 92;
        that.setData({
          winHeight: calc
        });
      }
    });
  },
  // 点击标题切换当前页时改变样式
  swichNav: function(e) {
    var cur = e.target.dataset.current;
    if (this.data.currentTaB == cur) {
      return false;
    } else {
      this.setData({
        currentTab: cur
      })
    }
  },
  //判断当前滚动超过一屏时，设置tab标题滚动条。
  checkCor: function() {
    if (this.data.currentTab > 4) {
      this.setData({
        scrollLeft: 300
      })
    } else {
      this.setData({
        scrollLeft: 0
      })
    }
  },
  // 滚动切换标签样式
  switchTab: function(e) {
    this.setData({
      currentTab: e.detail.current
    });
    this.checkCor();
  },
})

.js页面定义了三个变量：
（1）scrollLeft（控制滚动条的位置）（2）currentTab（用来标识当前切换到的Tab页面）（3）winHeight（设备的动态高度）。其中的onLoad（）函数的作用计算当前设备的手机宽度和高度并由此来计算设备的高度，以达到高度自适应的效果。swichNav（）函数是档切换不同的Tab标题时，给currentTab变量赋新值来让标题样式进行动态改变。swichTab（）和swichNav作用其实差不多，是让Tab页面进行动态改变。对于checkCor（）函数，如果你的Tab标题能够在当前屏幕全部显示出来，那么这个函数可以不写，但是如果Tab标题过多，那么使用这个函数，可以让被隐藏掉的Tab标题定位到当前屏幕。
这是这个网站真正意义上的第一篇博客，也是我人生中的第一篇博客，虽然感觉写的不是很清楚、很明了，但是记录下学习的过程我认为还是挺有意义。人生也正是在一步一步的尝试中不断进步，我也会利用好自己的大学时光，来丰富自己的专业知识，在这个网站上记录下更多的内容。
不知不觉，已经23：57分了……