各种业务场景功能的js实现

1.flex布局实现顶部导航栏固定

平常实现头部导航栏固定都是采用position:fixed方式，这种方式的缺点是脱离文本流，对于移动端某些业务场景，会导致导航栏遮住部分内容。

无意中发现竟然还可以用flex布局实现同样的效果，并且不脱离文本流。

.page{
    // 页面设置flex布局，主轴为垂直方向
    display: flex;
    flex-direction: column;
    height: 100%;
}
.header{
    // 头部设置高度
    height: 40px;
}
.content{
    // 设置项目占据空间
    flex: 1;
    overflow: auto;
}
.footer{
    // 底部区域设置高度
    height: 40px;
}

2.滑动实现tab吸顶

业务场景：页面滑动到某个位置后，显示tab栏并且固定于顶部。

实现方法：监听scroll滚动，获取内容区域距离顶部高度，控制tab栏隐藏与显示

mounted(){
    window.addEventListener('scroll',this.handleScroll,true);
},
destroyed(){
    // 一定要记得移除监听
   window.removeEventListener('scroll',this.handleScroll,true);
},
methods:{
   handleScroll(){
      let scrollTop = document.getElementsByClassName('wrapper')[0].scrollTop;
      if(scrollTop > 50){
        //设置tab显示
      } else{
        // 设置tab隐藏
      }
   }
}

3.tab栏切换

业务场景1: 点击切换tab，页面自动滚动到对应区域

实现方法：scrollInView()

 onChangeTab(tab){
    switch(tab.index){
      case 0: 
        document.getElementById('block1').scrollIntoView();
        break;
      case 1: 
        document.getElementById('block2').scrollIntoView();
        break;
      case 2: 
        document.getElementById('block3').scrollIntoView();
        break;
      case 3: 
        document.getElementById('block4').scrollIntoView();
        break;
      default: 
        break;
    }
  }

业务场景2: 上下滚动，tab栏自动切换

实现方法：getBoundingClientRect（）获取块元素到页面浏览器顶部的距离

由于时间紧急，写的比较粗暴。。。

 // 自动切换tab 写在前面的滚动监听事件handleScroll中
let block1 = document.getElementById('block1').getBoundingClientRect().top - tabHeight;
let block2 = document.getElementById('block2').getBoundingClientRect().top - tabHeight;
let block3 = document.getElementById('block3').getBoundingClientRect().top - tabHeight;
let block4 = document.getElementById('block4').getBoundingClientRect().top - tabHeight;
let array = [block1,block2,block3,block4];
for(let i=0;i<4;i++){
  if(array[i]<=0){
    this.selectIndex = i;
  }
}