vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作


Posted in Javascript onJuly 22, 2020

template里面:

<!-- tab切换star -->
   <ul class="tab-list" :class="{fixTitle:whether}">
    <li @click="curId=0" :class="{'cur':curId===0}">产品特点</li>
    <li @click="curId=1" :class="{'cur':curId===1}">投保须知</li>
    <li @click="curId=2" :class="{'cur':curId===2}">理赔流程</li>
   </ul>
  <!-- 切换内容star -->

设置fixTitle的样式,固定在顶部,cur是当前tab点击的颜色

<div class="tab-con">
 <div v-show="curId===0">
    第一部分内容
  </div>
 <div v-show="curId===1">
    第二部分内容
  </div>
 <div v-show="curId===2">
    第三部分内容
  </div>
</div>

当点击第一个产品特点的时候,对应下面的第一部分内容,点击投保须知对应第二部分内容,点击理赔流程对应第三部分内容

data里面:

data(){
  return:{
    whether:false,
    curId:0
  }
}

curId默认为0,展示的是产品特点的内容,也就是第一部分内容

methods里面:

设置滚动效果:

handleScroll() {
   var scrollTop =
    window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
   // console.log(scrollTop)
   if(scrollTop>329){
    this.whether = true;
   }else{
    this.whether = false;
   }
  },

在mounted里面:

window.addEventListener("scroll", this.handleScroll);

补充知识:vue组件之自定义tab切换组件(吸顶、滚动定位)等效果

目标问题

进入页面后,滚动一定距离使其吸顶。滚动到某DOM可视区域后,Tab拦当前选项主动滑动到该DOM上。且点击tab拦会定位到对应的dom位置。

vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作

实现效果动图

vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作

实现目的——html结构

<template>
  <div class="tab__main" :style="prop.box_style ? prop.box_style : ''">
    <div class="tab__div">
      <ul class="tab__list" :style="prop.attr.tab_style ? prop.attr.tab_style : ''">
        <li class="tab__item" v-for="(tabs, index) in prop.attr.tab_content" :key="tabs.tab_menu" @click="onClickTabs(index)"
        >
          <span :style="tabStyle(index)">{{ tabs.tab_menu }}</span>
        </li>
      </ul>
      <div class="active__line" :style="prop.attr.cur_slide_style ? prop.attr.cur_slide_style : ''"></div>
    </div>
  </div>
</template>

实现目的——less样式

.tab__div {
  width: 100%;
  height: 102px;
  position: relative;
  padding-top: 36px;
  background-color: #fff;
  .tab__list {
    display: flex;
    .tab__item {
      flex: 1;
      font-size: 32px;
    }
    .tab__item-current {
      font-weight: 700;
    }
  }
  .active__line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 187.5px;
    height: 5px;
    background-color: #4B8FFB;
    transition: all 300ms;
  }
}

实现目的——js部分

export default {
  name: 'TabModule',
  props: {
    prop: {
      type: Object
    }
  },
  data () {
    return {
      scrolltop: null,
      dom: null,
      domobj: {} // 各个dom的页面位置
    }
  },
  computed: {
    tabStyle () {
      return function (params) {
        return this.prop.attr.tab_content[params].tab_style || ''
      }
    }
  },
  mounted () {
    this.onWatchScroll()
    // 这里首次进入页面当前选中项为第一个
    document.querySelectorAll('.tab__item')[0].style = this.prop.attr.cur_tab_style ? this.prop.attr.cur_tab_style : ''
  },
  methods: {
    // 获取各个dom的页面位置
    getDomsObj () {
      this.domobj.dom1 = document.querySelectorAll(`#${this.prop.attr.tab_content[0].anchor_point}`)[0].offsetTop
      this.domobj.dom2 = document.querySelectorAll(`#${this.prop.attr.tab_content[1].anchor_point}`)[0].offsetTop
      this.domobj.dom3 = document.querySelectorAll(`#${this.prop.attr.tab_content[2].anchor_point}`)[0].offsetTop
      this.domobj.dom4 = document.querySelectorAll(`#${this.prop.attr.tab_content[3].anchor_point}`)[0].offsetTop
    },
    // 计算当前选中滑动块儿的滑动距离和当前选中项
    computerSlide (val) {
      let tablist = document.querySelectorAll('.tab__item')
      for (let i = 0; i < tablist.length; i++) {
        tablist[i].style = ''
      }
      document.querySelector('.active__line').style.transform = `translateX(${(val * document.querySelector('.active__line').offsetWidth)}px)`
      // 当前选中的tab_item的状态
      tablist[val].style = this.prop.attr.cur_tab_style ? this.prop.attr.cur_tab_style : ''
    },
    onClickTabs (index) {
      this.computerSlide(index)
      // 计算点击后滑动到DOM的位置
      this.dom = document.querySelectorAll(`#${this.prop.attr.tab_content[index].anchor_point}`)[0].offsetTop
      let tabbox = document.querySelectorAll('.tab__div')[0]
      if (index === 0) {
        if (tabbox.style.position === 'relative') {
          window.scrollTo(0, this.dom - tabbox.clientHeight)
          return
        }
        window.scrollTo(0, this.dom)
        return
      }
      if (index === 3) {
        window.scrollTo(0, this.dom)
        return
      }
      if (tabbox.style.position === 'relative') {
        window.scrollTo(0, this.dom - (tabbox.clientHeight * 2))
      } else {
        window.scrollTo(0, this.dom - tabbox.clientHeight)
      }
    },
    onWatchScroll () {
      let tabmain = document.querySelectorAll('.tab__main')[0]
      let tabdiv = document.querySelectorAll('.tab__div')[0]
      tabdiv.style.top = 0
      window.onscroll = () => {
        // 由于在created()或者mounted()钩子函数中获取到的dom位置不对,在滑动中获取dom的页面位置
        this.getDomsObj()
        this.scrolltop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
        // 滑动根据滚动距离来计算当前可是区域的选中项
        this.onScrollPage()
        // 自定义吸顶效果
        if (this.scrolltop > tabmain.offsetTop) {
          tabdiv.style.position = 'fixed'
          tabdiv.style['z-index'] = 99
        } else {
          tabdiv.style.position = 'relative'
          tabdiv.style['z-index'] = 0
        }
      }
    },
    onScrollPage () {
      let tab = document.querySelectorAll('.tab__div')[0]
      if (this.scrolltop > this.domobj.dom1 && this.scrolltop < (this.domobj.dom2 - tab.offsetHeight * 2)) {
        this.computerSlide(0)
      } else if (this.scrolltop > (this.domobj.dom2 - tab.offsetHeight * 2) && this.scrolltop < this.domobj.dom3 - tab.offsetHeight * 2) {
        this.computerSlide(1)
      } else if (this.scrolltop > (this.domobj.dom3 - tab.offsetHeight * 2) && this.scrolltop < (this.domobj.dom3 + tab.offsetHeight * 2)) {
        this.computerSlide(2)
      } else if (this.scrolltop > (this.domobj.dom4 - tab.offsetHeight * 10) && this.scrolltop < this.domobj.dom4) {
        this.computerSlide(3)
      }
    }
  }
}

完成目的——页面引用组件

<template>
  <div>
    <div class="div__header"></div>
    <tab-module :prop="tabattributes"></tab-module>
    <div :id="tabattributes.attr.tab_content[index].anchor_point" class="div__item" v-for="(item, index) in fordiv" :key="item">{{ item }}</div>
    <div class="div__footer">我是有底线的</div>
  </div>
</template>

import TabModule from '../../components/TabModule.vue'
export default {
  components: {
    TabModule
  },
  data () {
    return {
      tabattributes: {
        box_style: "margin-top: 10px;",         
        attr: {      
          cur_tab_style: "font-weight: 700;", 
          cur_slide_style: "",
          tab_content: [{
            tab_menu: "控件1",       
            anchor_point: "DomPoint1",
            tab_style: "" 
          }, {
            tab_menu: "控件2",       
            anchor_point: "DomPoint2",  
            tab_style: "" 
          }, {
            tab_menu: "控件3",       
            anchor_point: "DomPoint3",  
            tab_style: "" 
          }, {
            tab_menu: "控件4",       
            anchor_point: "DomPoint4", 
            tab_style: "" 
          }]
        }
      },
      fordiv: ['页面控件1', '页面控件2', '页面控件3', '页面控件4']
    }
  }
}

<style lang="less" scoped>
.div__header {
  width: 100%;
  height: 200px;
  background-color: #909;
}
.div__item {
  width: 100%;
  height: 400px;
  background-color: rgb(78, 215, 224);
  text-align: center;
  font-size: 26px;
}
.div__footer {
  width: 100%;
  height: 200px;
  background-color: #090;
}
</style>

以上这篇vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
jQuery中需要注意的细节问题小结
Dec 06 Javascript
jquery插件制作 表单验证实现代码
Aug 17 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
详解angularJS自定义指令间的相互交互
Jul 05 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
webpack 最佳配置指北(推荐)
Jan 07 Javascript
vue页面跳转实现页面缓存操作
Jul 22 #Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 #Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 #Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 #Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 #Javascript
vue 弹出遮罩层样式实例
Jul 22 #Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 #Javascript
You might like
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
php读取3389的脚本
2014/05/06 PHP
PHP7内核之Reference详解
2019/03/14 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
python mysql断开重连的实现方法
2019/07/26 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
英国DIY和家居装饰领域的主要品牌:Wickes
2019/11/26 全球购物
北大青鸟学生求职信
2013/09/24 职场文书
社区工作者感言
2014/03/02 职场文书
爱我中华演讲稿
2014/05/20 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
党支部综合考察意见
2015/06/01 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书
详解Vue的列表渲染
2021/11/20 Vue.js
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技