vue滚动tab跟随切换效果


Posted in Javascript onJune 29, 2020

分享一个我前几天做的移动端 tab滚动跟随的例子

vue滚动tab跟随切换效果

随着滚动条的滚动,tab会对应进行切换

首先我们需要监听当前页面的滚动

mounted(){
 //记录每个内容对用的dom数组
 this.arrDom = document.getElementsByClassName("item-content");
 window.addEventListener('scroll', this.handleScroll);
 },
 
 destroyed(){
 window.removeEventListener('scroll', this.handleScroll);
 },

我们的tab列表可以在data里面进行自定义数组:

tabList:[{
 id:1,
 name:'详情'
 },{
 id:2,
 name:'评论'
 },{
 id:3,
 name:'新闻'
 },{
 id:4,
 name:'关于'
 },{
 id:5,
 name:'相关'
 }],

然后我们在dom里面对应渲染tab列表和对应内容,内容可以直接关联到tablist的item中的一个字段,也可以分开写

<nav :class="headerFixed?'tabFixed tablist':'tablist'" id='tab'>
 <div @click='handleSelectTab(item.id)' :class="active==item.id?'tab-item tab-active':'tab-item'" v-for='item in tabList' :key='item.id'>{{item.name}}</div>
</nav>
<div class="item-content">
 <div>11111111</div>
</div>
<div class="item-content">
 <div>22222</div>
</div>
<div class="item-content">
 <div>33333</div>
</div>
<div class="item-content">
 <div>44444</div>
</div>
<div class="item-content">
 <div>555555</div>
</div>

然后就是我们的js部分了

handleScroll(){
 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
 this.headerFixed = scrollTop > this.offsetTop;
 for (let i = 0; i < this.arrDom.length; i++) {
  //因为下面使用到了i+1,所以需要把最后一个分离出来判断
 if(this.arrDom[this.arrDom.length-1].offsetTop-scrollTop>80){
  if(this.arrDom[i].offsetTop-scrollTop<=80&&this.arrDom[i+1].offsetTop-scrollTop>80){
  this.active = i+1
  }
 }else{
  this.active = this.arrDom.length;
 }
 
 }
 },

然后就成功完成了我们的效果!

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript比较文档位置
Apr 08 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
用JavaScript实现对话框的教程
Jun 04 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
深入浅析var,let,const的异同点
Aug 07 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 Javascript
Vue.js实现tab切换效果
Jul 24 #Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 #Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 #Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 #Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 #Javascript
javascript关于“时间”的一次探索
Jul 24 #Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 #Javascript
You might like
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
解决laravel session失效的问题
2019/10/14 PHP
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
python的即时标记项目练习笔记
2014/09/18 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
python如何使用代码运行助手
2020/07/03 Python
如何用Python徒手写线性回归
2021/01/25 Python
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
抽象类和接口的区别
2012/09/19 面试题
高二政治教学反思
2014/02/01 职场文书
七匹狼男装广告词
2014/03/21 职场文书
一般党员对照检查材料
2014/09/24 职场文书
2014年度安全工作总结
2014/12/04 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
教师工作证明范本
2015/06/12 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python