小程序实现实现tab-control停留效果—————（2020.1.11学习笔记）

这次实现的tab-control停留效果如下图

要实现停留效果，必须先自定义一个tab-control组件，这里实现tab-control的详细流程请看这个我2019.12.23的学习笔记（https://blog.csdn.net/qq_37704442/article/details/103674433）
，然后在要实现效果的页面对应的wxml文件上，引用两个自定义tab-control组件，一个使用一个值为false的变量隐藏起来，另一个使用该变量的取反值，这样两个自定义tab-control组件就不会同时出现了，然后使用onPageScroll函数监听用户下滑深度，下滑触发的深度是在图片加载完后，顶端与固定自定义tab-control组件的距离，为了计算距离，先在一个tab-control组件上声明id属性为"tab-control",然后使用select计算距离，为了实现即时计算，这个放在页面onShow函数触发1000毫秒之后执行，最后利用计算好的距离，在用户下滑到对应的触发深度之后，固定的tab-control组件隐藏，然后起初隐藏的另一个tab-control组件，转为显示状态，并使用之前声明好的样式，让显示的tab-control组件浮在上方，以上就是实现tab-control停留效果的主要思路了，接下来就是实现代码阶段
在对应页面wxml文件上的代码（如下）

<My_Tab list_titles="{{titles}}" id="tab-control"  binditemclick="handleTabClick" class="{{isTabFixed?'fixed':''}}"></My_Tab>
<My_Tab list_titles="{{titles}}" wx:if="{{isTabFixed}}"></My_Tab>

在JS文件上的代码（如下）

 data: {
isTabFixed:false,
}，
 onShow() {
    
      setTimeout(()=>{
        wx.createSelectorQuery().select('#tab-control').boundingClientRect(rect=>{
         this.data.tabScrollTop=rect.top
        }).exec()
      },1000)
  },
  onPageScroll(options)
  {
    const scrollTop=options.scrollTop;
    const flag1= scrollTop >= TOP_DISTANCE;
    if(flag1!=this.data.showBackTop)
    {
      this.setData(
        {
          showBackTop:flag1
        }
      )
    }
    const flag2=scrollTop >=this.data.tabScrollTop;
    if(flag2!=this.data.isTabFixed)
    {
      this.setData(
        {
          isTabFixed:flag2
        }
      )
    }
  },

触发之后使用的样式（如下）

.fixed{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}