H5横向滑动菜单

H5横向滑动菜单

最近处理一个需求，产品需要做一个顶部横向的菜单栏，类似于今日头条首页的菜单栏
先来看看效果：

构思

首先说说我的思路吧 ，通过设置一个横向的导航栏，滑动到顶部后悬浮，然后滑下来后再继续随着页面滑动。

实现过程

1、设置导航栏，这里我们需要一个三层div嵌套的导航

导航栏核心代码

<div class="nav" ref="nav">
    <div class="fixednav" ref="fixednav">
      <div class="fixednavcontent" ref="fixednavcontent">
        <p v-for="item,index of items" class="tabtitle" :class="{selecttab:active===item}" @click="changeTab(item)">{
  {item}}</p>
      </div>
    </div>
  </div>

导航栏样式

.nav {
   
  top: 0;
  height: 90px;
  width: 100%;
  background: white;
  z-index: 1;
  border-bottom: solid 1PX #dbdbdb;
  .fixednav {
   
    overflow-x: scroll;
    .fixednavcontent {
   
      display: flex;
      float: left;
    }
  }
  .tabtitle {
   
    width: 180px;
    font-size: 28px;
    line-height: 88px;
    text-align: center;
    height: 88px;
    border: none;
    box-shadow: none;
    color: #bbb;
  }
  .selecttab {
   
    position: relative;
    color: #4FBF86;
    &::after {
   
      position: absolute;
      content: " ";
      bottom: 0px;
      left: 50%;
      width: 40px;
      height: 8px;
      border-radius: 4px;
      background: #00a86a;
      position: absolute;
      transform: translateX(-50%);
    }
  }
}

2、控制菜单栏滑动到页面头部时固定

toScroll() {
   
      if (this.$refs.headcontent && this.$refs.headcontent.getBoundingClientRect().bottom < 0) {
   
        this.$refs.nav.style.position = 'fixed';
      } else {
   
        this.$refs.nav.style.position = 'relative';
      }
    }

说明一下，这里的this.$refs.headcontent是导航上部分内容，这里取它的下边沿距离页面顶部的距离，来给导航栏设置position为相对定位还是fixed；

3、控制tab切换这里设置active来标记导航当前选中的哪一个

 changeTab(tab) {
   
      if (tab !=