Vue.js+cube-ui（Scroll组件）实现类似头条效果的横向滚动导航条

本博主在一次个人移动端项目中，遇到这么一个需求：希望自己的项目中，头部导航条的效果可以像今日头条那样，横向滚动!

对于这样的效果，在各大移动端项目中几乎是随处可见，为什么呢？

       我们都知道，对于移动端也就是手机上，我们页面的宽度并不像PC端那样大，可以显示很长的导航项，但对于我们移动端来说，由于功能的拓展，或者业务的细分，往往导航项也会随之增多，一旦超过移动端在一行的页面显示宽度，那便会出现导航项换行的现象，虽说也有这样布局，但一旦导航项增多到一定程度的时候，我们的页面（首页）将均被导航项霸占，这样不仅影响重点内容的展示同时对用户的体验度也有很大程度的影响！所以，为了解决这相关问题，出现了横向滚动条，主要有几点好处：

•毫无疑问的一点，用户体验好：用户可以根据自己的需要，滑动导航的方式选择自己的方式
•便于管理与维护
•使得页面变得更为美观
•突出主体业务

那么这么一个用户体验好，然后又实用的效果是怎么实现的呢？

为了坚持“不重复造轮子，在理解研究轮子的基础上进行改革创新”的原则，我选择了滴滴团队的开源框架 —— cube-ui

　　cube-ui 框架的官方文档地址：https://didi.github.io/cube-ui/#/zh-CN/docs/introduction

　　在开始实现之前，本博主也是踩了不少坑啊，吐槽就不说了，说多了都是泪啊！下面进入主题：

　　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"></span>   </div> </div>

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

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

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