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

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

先看wxml部分的代码

      
        
          推荐
        
        
          日记
        
        
          专题栏目
        
        

      

      
      
        
          
            内容1
            内容1
            内容1
            内容1
            内容1
            内容1
            内容1
            内容1
            内容1内容1
          
        
        
          
            内容2
          
        
        
          
            内容3
          
        
      
    

 再看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];
    });
  },

回看上面的蓝色滑块

它的位置为一个动态样式，采用绝对定位，距离左边的距离就为当前选中标题文字距离屏幕左侧的距离，长度为选中标题的长度。在添加一个过渡动画则可实现滑动的效果。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 

错误代码：