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技术技巧大全(五)
Jan 22 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
html文档中的location对象属性理解及常见的用法
Aug 13 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
Javascript异步编程async实现过程详解
Apr 02 Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 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
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
js loading加载效果实现代码
2009/11/24 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
解析Python编程中的包结构
2015/10/25 Python
Python中functools模块的常用函数解析
2016/06/30 Python
Python Flask-web表单使用详解
2017/11/18 Python
python实现关键词提取的示例讲解
2018/04/28 Python
python 检查文件mime类型的方法
2018/12/08 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
python为什么要安装到c盘
2020/07/20 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
销售业务实习自我鉴定
2013/09/23 职场文书
高一生物教学反思
2014/01/17 职场文书
应届生面试求职信
2014/07/02 职场文书
致运动员加油稿
2015/07/21 职场文书
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs