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


Posted in Javascript onJune 24, 2019

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

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

       我们都知道,对于移动端也就是手机上,我们页面的宽度并不像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

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

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

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

<cube-scroll ref="navScroll" direction="horizontal">
   <ul class="nav-wrapper" :style="{width:navWidth+'px'}">
     <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.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
Jan 08 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
angularjs中的$eval方法详解
Apr 24 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 #Javascript
React组件对子组件children进行加强的方法
Jun 23 #Javascript
vue使用websocket的方法实例分析
Jun 22 #Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 #Javascript
js图片查看器插件用法示例
Jun 22 #Javascript
JS实现继承的几种常用方式示例
Jun 22 #Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 #Javascript
You might like
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
Zend 输出产生XML解析错误
2009/03/03 PHP
PHP 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
Node.js的特点详解
2017/02/03 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
详解vue-router 路由元信息
2017/09/13 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
python实现决策树分类算法
2017/12/21 Python
matplotlib绘制动画代码示例
2018/01/02 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
python 函数中的参数类型
2020/02/11 Python
Pygame框架实现飞机大战
2020/08/07 Python
python中的yield from语法快速学习
2020/11/06 Python
专业毕业生个性的自我评价
2013/10/03 职场文书
教学大赛获奖感言
2014/01/15 职场文书
校运会入场式解说词
2014/02/10 职场文书
毕业生求职信范文
2014/06/29 职场文书
交通安全温馨提示语
2015/07/14 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书