Vue实现实现一个带底部标识的横向滚动导航栏

写在前面：

        此文章参考了 csdn 中另外两位大佬的文章，在他们的基础上又加上自己的写法。

        地址1： 这个是 uniapp 实现的uniapp： 实现一个优美的带底部标识的横向滚动导航栏_uniapp横向滚动导航条_CC#的博客-CSDN博客

        地址2：仿淘宝菜单栏左右滑动（VUE 移动端）_计算菜单分类滚动距离_浅暖呀丶的博客-CSDN博客

正文：

        先看效果，没有做滚动到一定距离强制翻页，和底部导航实时滑动。  

      

 

1. 将拿到的数据拆分成8个一组

// this.fastData.datas为接口返回的菜单数组
    let menuArr = [];
    // 处理nav为每8个一组
    if (this.fastData.datas.length) {
      let [start, end, result] = [null, null, []]
      for (let i = 0; i < Math.ceil(this.fastData.datas.length / 8); i++) {
        start = i * 8
        end = start + 8
        result.push(this.fastData.datas.slice(start, end))
      }
      menuArr = result;
      this.menus=menuArr;
    }

2. 布局

<!--    导航区域-->
    <div class="home-index__nav" ref="menuItemsNav" @scroll="scrollNav" >
      <div class="home-index__nav-item" v-for="(item,index) in menus">
        <div class="home-index__nav-list" v-for="(nav,key) in item" :key="key" @click="itemLink(nav)">
          <i class='fast-icon iconfont' :class="nav.FICONURL===''?'icon-xiaoshou':nav.FICONURL"
             :style="{ color: nav.FICONCOLOR }"></i>
          <div class="home-index__nav-title area-row">{{nav.FNAME}}</div>
        </div>
      </div>
    </div>

    <!--    底部滚动条-->
    <div style="height:6px;margin-top:7px;" class="mb">
      <div class="home-index__nav-scroll" :style="{width:showSmallLength<=0?'100%':showSmallLength+'px'}"
           v-if="menus.length >= 2"
      >
        <span :style="{left:left+'px'}"></span>
      </div>
    </div>

3. 样式

::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}
.home-index__nav {
  white-space: nowrap;
  max-height: 168px;
  padding: 12px 0;
  overflow-x: scroll;
  width: 375px;
}
.home-index__nav-item {
  display: inline-flex;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  margin-top: 0;
}
.home-index__nav-title {
  font-size: 12px;
  color: #454545;
  margin-top: 3px;
}
.home-index__nav-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 25%;
  margin-top: 15px;
  &:nth-child(-n+4) {
    margin-top: 0;
  }
  i {
    font-size: 25px;
  }
}
.home-index__nav-scroll {
  position: relative;
  height: 6px;
  background: #E4E4E4;
  border-radius: 10px;
  margin: 0 auto 10px auto;
}
.home-index__nav-scroll span {
  position: absolute;
  width: 18px;
  height: 6px;
  background: #CBAA65;
  border-radius: 10px;
  display: inline-block;
}

4. 逻辑

  data() {
    return {
      fastData: {},
      menus: [],
      showSmallLength: '',
      left: 0,
    }
  },




// 获取菜单栏的左右滚动距离
    scrollNav(e) {
      let menuItemsNav = this.$refs.menuItemsNav;  // div上设置 ref="menuItemsNav"
      console.log(menuItemsNav.scrollLeft);
      // menuItemsNav.scrollLeft 盒子向右滑动的距离，也是向向左偏移量
      let left;
      let menus = this.menus;
      if(menus.length >1) {  //18 为底部带颜色滑块的宽度 总宽：375 单位px
        if(menuItemsNav.scrollLeft / 375 >= 1) {
          left = menuItemsNav.scrollLeft / 375 * 18;
        }else if(menuItemsNav.scrollLeft < 100){
          left = 0;
        }
      }

      this.left = left;  // 通过控制偏移量，来控制滑块位置
    },


    getRatio() { // 这个方法最好在created中最后调用，也可以不写方法，直接写在created中
      // 底部总宽度（不是带颜色滑块宽度） 为数组长度 * 18
      let menus = this.menus;
      this.showSmallLength = menus.length * 18;  // 18 为底部带颜色滑块的宽度
    }

欢迎大神补充指导