wepy微信小程序使用swiper制作滑动选项卡tab效果（标题带滑动特效）

最近在做小程序时想做一个APP的那种滑动tab效果，滑动内容可以使用小程序原生的swiper实现，标题滑动效果使用动态样式实现，直接上图。

先看wxml部分的代码

<!--Tab布局-->
      <view class='title'>
        <view class='titleSel' bindtap='titleClick' data-idx='0'>
          <text>推荐</text>
        </view>
        <view class='titleSel' bindtap='titleClick' data-idx='1'>
          <text>日记</text>
        </view>
        <view class='titleSel' bindtap='titleClick' data-idx='2'>
          <text>专题栏目</text>
        </view>
        <hr class="headerLineSel" style="left:{{titleSelPositon[currentIndex].left}}px;width:{{titleSelPositon[currentIndex].width}}px" />
      </view>

      <!--内容布局-->
      <swiper class='swiper' bindchange='pagechange' current='{{currentIndex}}' style='width:100%;overflow:auto;'>
        <swiper-item class='swiper-item'>
          <view>
            <view class='name'>内容1</view>
            <view class='name'>内容1</view>
            <view class='name'>内容1</view>
            <view class='name'>内容1</view>
            <view class='name'>内容1</view>
            <view class='name'>内容1</view>
            <view class='name'>内容1</view>
            <view class='name'>内容1</view>
            <view class='name'>内容1</view><view class='name'>内容1</view>
          </view>
        </swiper-item>
        <swiper-item class='swiper-item'>
          <view>
            <view class='name'>内容2</view>
          </view>
        </swiper-item>
        <swiper-item class='swiper-item'>
          <view>
            <view class='name'>内容3</view>
          </view>
        </swiper-item>
      </swiper>
    </view>

 再看wxss样式，这里我使用了less

.tab {
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    .title {
      position: relative;
      width: 100%;
      height: 88rpx;
      background: white;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      border-bottom: 1px solid #dddddd;
      .titleSel {
        color: #5f6fee;
        font-size: 32rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 10px
      }
      .headerLineSel {
        position: absolute;
        background: #5f6fee;
        height: 6rpx;
        margin-top: 10rpx;
        transition: all 0.5s;
        bottom: 0;
      }
    }
    .swiper {
      width: 100%;
      flex: 1;
      min-height: calc(100% - 55px);
      overflow: auto;
      .recordItem {
        margin-top: 10rpx;
        background-color: white;
        padding-bottom: 20rpx;
        padding-top: 20rpx;
      }
      .swiper-item{
        min-height: 100%;
        overflow: scroll;
      }
    }
  }

以上的代码可以看到一个静态的页面的，但是要实现滑动及效果需要使用到JS的帮助

包含两个变量

data: {
    currentIndex: 0,   //当前内容索引
    titleSelPositon: []   //保存标题的坐标信息
  },

其中的  titleSelPositon  变量为标题数组，起值为每个标题的属性信息（如距离顶部的距离），在onShow阶段可对其赋值，代码hui如下：

onShow() {
    //获取tab每项坐标
    const query = wx.createSelectorQuery(); // 创建节点查询器 query
    query.selectAll('.titleSel').boundingClientRect(); // 这段代码的意思是选择Id=productServe的节点，获取节点位置信息的查询请求
    query.selectViewport().scrollOffset(); // 这段代码的意思是获取页面滑动位置的查询请求
    query.exec(res => {
      this.titleSelPositon = res[0];
    });
  },

回看上面的蓝色滑块

<hr class="headerLineSel" style="left:{{titleSelPositon[currentIndex].left}}px;width:{{titleSelPositon[currentIndex].width}}px" />

它的位置为一个动态样式，采用绝对定位，距离左边的距离就为当前选中标题文字距离屏幕左侧的距离，长度为选中标题的长度。在添加一个过渡动画则可实现滑动的效果。transition: all 0.5s;

.headerLineSel {
        position: absolute;
        background: #5f6fee;
        height: 6rpx;
        margin-top: 10rpx;
        transition: all 0.5s;
        bottom: 0;
      }

其他常见问题：

（1）内容区的高度设置100%没有效果

需要在本页面的样式中加上

page{
    height: 100%;
}

并且不能加上 scope 

错误代码：

<style lang="less" scoped>
....
<style>

正确方法：

<style lang="less" >
page{
    height: 100%;
}
....
<style>

（2）内容区超出高度不可见

设置高度超出添加滚动条

.swiper-item{
   min-height: 100%;
   overflow: scroll;
}