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 结构就是：一个大的盒子套了两个小盒子，一个是滚动导航，另外一个是额外拓展（对本效果不影响，能够忽略）

 

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

 

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

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

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

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

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

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

1 <cube-scroll ref="navScroll" direction="horizontal">
2     <ul class="nav-wrapper" :style="{width:navWidth+'px'}">
3         <li v-for="(item, index) in navTxts" :key="index" class="nav-item">{{ item }}</li>
4     </ul>
5 </cube-scroll>

 

 

1 methods: {
2     widthComputed() {
3       this.navWidth=this.navTxts.length*520
4     }
5   },
6   created() {
7     this.widthComputed()
8   }

 

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

 1 .cube-scroll-content
 2       display inline-block
 3       .nav-wrapper
 4         display inline-block
 5         white-space nowrap
 6         line-height 80px
 7         .nav-item
 8           display: inline-block
 9           padding: 0 30px
10           font-size 40px

　　这样，一个横向滚动条就实现了，若是有不足或者错误的地方，欢迎你们指出，一块儿交流解决哈！