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 相关文章推荐
js获得地址栏?问号后参数的方法
Aug 08 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
JQuery包裹DOM节点的方法
Jun 11 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
JavaScript数组排序的六种常见算法总结
Aug 18 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
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
深入理解js promise chain
2016/05/05 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
js序列化和反序列化的使用讲解
2019/01/19 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
python操作MongoDB基础知识
2013/11/01 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
Python+Opencv实现把图片、视频互转的示例
2020/12/17 Python
篝火晚会策划方案
2014/05/16 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
服务承诺书怎么写
2014/05/24 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
全陪导游词开场白
2015/05/29 职场文书
远程教育培训心得体会
2016/01/09 职场文书
Mysql Show Profile
2021/04/05 MySQL
python中的3种定义类方法
2021/11/27 Python