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 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
JS设置获取cookies的方法
Jan 26 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
canvas知识总结
Jan 25 Javascript
javascript 取小数点后几位几种方法总结
Aug 02 Javascript
Vue中正确使用jQuery的方法
Oct 30 jQuery
详解ES6中的三种异步解决方案
Jun 28 Javascript
puppeteer实现html截图的示例代码
Jan 10 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
在普通HTTP上安全地传输密码
2007/07/21 PHP
phplot生成图片类用法详解
2015/01/06 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
js 匿名调用实现代码
2009/06/19 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
在react中使用vuex的示例代码
2018/07/30 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
angular *Ngif else用法详解
2020/12/15 Javascript
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
Python中subprocess的简单使用示例
2015/07/28 Python
python中正则的使用指南
2016/12/04 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
python基于Selenium的web自动化框架
2019/07/14 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
python getpass模块用法及实例详解
2019/10/07 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
社区工作感言
2014/02/21 职场文书
2014年客房部工作总结
2014/11/22 职场文书
2014年党务公开工作总结
2014/12/09 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书