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 相关文章推荐
非常不错的功能强大代码简单的管理菜单美化版
Jul 09 Javascript
js验证电话号码与手机支持+86的正则表达式
Jan 23 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
使用jquery如何获取时间
Oct 13 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
node实现基于token的身份验证
Apr 09 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 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 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
Jquery中dialog属性小记
2010/09/03 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
vue mounted组件的使用
2018/06/18 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
详细解析Python当中的数据类型和变量
2015/04/25 Python
python实现的简单FTP上传下载文件实例
2015/06/30 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
Python实现通过继承覆盖方法示例
2018/07/02 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
python3 简单实现组合设计模式
2020/07/02 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
华为c/c++笔试题
2016/01/25 面试题
护理专业学生的求职信范文
2013/12/11 职场文书
亲属关系公证书
2014/04/08 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
入党转正申请报告
2015/05/15 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
python字符串的多行输出的实例详解
2021/06/08 Python