Vue如何实现类似头条效果的横向滚动导航条

这篇文章主要讲解了“Vue如何实现类似头条效果的横向滚动导航条”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue如何实现类似头条效果的横向滚动导航条”吧！

　　cube-ui 所提供的组件中，有个 Scroll 的组件，是一个基于better-scroll进行封装的组件.其实现原理我就不过多赘述了。

　　大概的一个 HTML 结构就是：一个大的盒子套了两个小盒子，一个是滚动导航，另一个是额外拓展（对本效果不影响，可以忽略）

 <div class="nav-scroll-list-wrap">
   <cube-scroll ref="navScroll" direction="horizontal">
     <ul class="nav-wrapper">
      <li v-for="(item, index) in labels" :key="index" class="nav-item">{{ item }}</li>
     </ul>
   </cube-scroll>
   <div class="search-icon">
     <span class="iconfont icon">&#xe628;</span>
   </div>
 </div>

　　这里说下 labels 是我传入的导航项数据，是一个本地 mock 数据，共八项

　　样式部分：这里是实现的重点！因为对于 Scroll 组件，内容元素.cube-scroll-content在滚动方向上的长度必须大于容器元素，分为纵向滚动和横向滚动，这里实现的是横向滚动，纵向的原理也是大同小异，取决于滚动的方向采取不同的样式.

 .nav-scroll-list-wrap
   position relative
   padding-right 120px

　　大盒子部分的样式对于该需求几乎无影响，这里主要是想说下，设置为相对定位，是为了子元素的定位，子绝父相，而内边距是为了腾出一部分位置给采用绝对定位的子元素（搜索图标），同时这也是一个布局技巧和滚动的关键，为什么这么说呢？

　　首先，布局技巧：可以腾出一部分位置给拓展功能项用，其次可以解决拓展功能项因为增加 z-index 而将滚动的最后一个导航项遮挡住的问题；

　　滚动的关键：假如没有这个内边距，那么我八个导航项根据其占据的宽度将不能大于容器元素，从而出现无法滚动的现象，而这个内边距的出现正好是可以减小容器元素的宽度，那么只要导航项足够且不少的情况下是可以实现内容元素在滚动方向上的长度大于容器元素的，但如果在项目初期，导航项过少，只有四五个的情况下不建议使用这个方法，这种情况一般都是采取传统的解决方法：在传入数组导航的长度基础上乘以一个数值来动态增加内容元素的宽度，具体做法：

<cube-scroll ref="navScroll" direction="horizontal">
   <ul class="nav-wrapper" :>
     <li v-for="(item, index) in navTxts" :key="index" class="nav-item">{{ item }}</li>
   </ul>
 </cube-scroll>

 methods: {
   widthComputed() {
    this.navWidth=this.navTxts.length*520
   }
  },
  created() {
   this.widthComputed()
  }

　　其余样式：基本在官方的文档中均有说明，我改动了部分，具体的我就不过多赘述了

 .cube-scroll-content
    display inline-block
    .nav-wrapper
     display inline-block
     white-space nowrap
     line-height 80px
     .nav-item
      display: inline-block
      padding: 0 30px
      font-size 40px

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

感谢各位的阅读，以上就是“Vue如何实现类似头条效果的横向滚动导航条”的内容了，经过本文的学习后，相信大家对Vue如何实现类似头条效果的横向滚动导航条这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！