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 相关文章推荐
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
微信小程序后台解密用户数据实例详解
Jun 28 Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 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
joomla数据库操作示例代码
2016/01/06 PHP
PHP云打印类完整示例
2016/10/15 PHP
javascript动画浅析
2012/08/30 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
利用node.js制作命令行工具方法教程(一)
2017/06/22 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
爬山算法简介和Python实现实例
2014/04/26 Python
最基础的Python的socket编程入门教程
2015/04/23 Python
python实战教程之自动扫雷
2018/07/13 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
如何运行带参数的python脚本
2019/11/15 Python
python创建学生成绩管理系统
2019/11/22 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
农田水利实习自我鉴定
2013/09/19 职场文书
高中军训感言1000字
2014/03/01 职场文书
项目负责人任命书
2014/06/04 职场文书
质量月活动总结
2014/08/26 职场文书
2014年施工员工作总结
2014/11/18 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
年会主持人开场白台词
2015/05/29 职场文书
发票退票证明
2015/06/24 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
《比尾巴》教学反思
2016/02/24 职场文书