vue滚动tab跟随切换效果

分享一个我前几天做的移动端 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;
    }

   }
 },

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

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

(0)

相关推荐

  • Vue.js tab实现选项卡切换

    本文为大家分享了Vuejs 组件化开发tab组件实例,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/index.css" rel=&quo

  • Vue2.0 多 Tab切换组件的封装实例

    Vue2.0 多 Tab切换组件简单封装,满足自己简单的功能,可以直接拿去使用! 首先上效果图: 功能简单介绍: 1.支持tab切换 2.支持tab定位 3.支持tab自动化 仿React多Tab实现,总之可以正常使用满足日常需求, 1.使用方法: ==index.vue文件== <TabItems> <div name="买入" class="first"> <Content :isContTab = "0" /&

  • Vue.js组件tabs实现选项卡切换效果

    今天给大家分享一个小颖自己写的vue组件,因为小颖也才接触vue没多久,如果有什么不足的地方,希望大家提出来,小颖加以改正.以下就是具体如何实现tabs啦. 调用示例: <template> <div class="tabs-contents"> <!-- 调用tabs组件 --> <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'> <di

  • 基于Vue实现tab栏切换内容不断实时刷新数据功能

    先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax请求,防止阻塞,首次加载页面的时候又不能5个ajax同时请求,只需要请求第一个就好 也没有必要建立5个区域,控制显示隐藏,浪费性能,业务代码就不贴了,把大概原理的代码贴上来 先是用jq实现了一版 <!DOCTYPE html> <html lang="en"> &l

  • vue仿淘宝订单状态的tab切换效果

    前几天刚开始使用vue 做项目,然后自己就在项目中摸索写了一个tab切换的小dome,仿淘宝订单状态的tab切换. HTML 代码: <div class="navigation"> //这里是通过循环遍历出来的数据,你需要根据index的值来判断你现在点击的是第几个tab栏导航,同时在js中写一个navChange的方法来把index 传递到就js中来改变tabIndex(这是在初始化时设置的默认index)的值 <span v-for="(item, i

  • 详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)

    在 vue 中,实现 Tab 切换主要有三种方式:使用动态组件,使用 vue-router 路由,使用第三方插件. 因为这次完成的功能只是简单切换组件,再则觉得使用路由切换需要改变地址略微麻烦,所以使用的是动态组件实现,如果是在大型应用上,可能使用 vue-router 会方便一些. 先看下最终实现的效果,结构比较简单,顶部的三个 Tab 标签用于切换,内容区域分别为三个子组件. 效果预览 关键代码及分析如下: <template> // 每一个 tab 绑定了一个点击事件,传入的参数对应着

  • Vue.js组件tab实现选项卡切换

    本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{padding: 0;margin:

  • 详解使用vue实现tab 切换操作

    在使用jQuery类库实现tab功能时,是获取鼠标在mousenter或click时的index值,然后切换到当前的标题和内容,把其他的标题和内容的状态去掉: $('.tab .title').find('.item') .removeClass('current').eq(index).addClass('current'); // 为index位置的title添加current $('.tab .content').find('.item') .hide().eq(index).show()

  • vue刷新和tab切换实例

    首先写个子组件用来放刷新的内容,命名为pull(可以看例子最后面放的.) 然后再要刷新的页面引用 <template> <div class="fbjbox container"> <div class="fbjbox1"> <tab ref='tab' :list="['推荐','热门','最新']" width="33%" @change='tabchange' style=&qu

  • vue实现tab切换外加样式切换方法

    实例如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; list-style: none } #app { width: 504px; height: 300px; margin: 100

随机推荐