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代码
Apr 23 Javascript
可以将word转成html的js代码
Apr 11 Javascript
基于jQuery实现下拉框
Nov 24 Javascript
jquery实现图片上传之前预览的方法
Jul 11 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 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
PHP CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
Thinkphp模板中截取字符串函数简介
2014/06/17 PHP
PHP之预定义接口详解
2015/07/29 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
Node.js的npm包管理器基础使用教程
2016/05/26 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
解读python如何实现决策树算法
2018/10/11 Python
python多线程下信号处理程序示例
2019/05/31 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
python 画图 图例自由定义方式
2020/04/17 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
Python Map 函数的使用
2020/08/28 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
python简单实现插入排序实例代码
2020/12/16 Python
python+opencv实现车道线检测
2021/02/19 Python
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
美国滑板店:Tactics
2020/11/08 全球购物
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
国际语言毕业生求职信
2014/07/08 职场文书
学习心理学的体会
2014/11/07 职场文书
Python OpenCV快速入门教程
2021/04/17 Python
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL