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椭圆旋转相册实现代码
Jan 16 Javascript
js图片自动切换效果处理代码
May 07 Javascript
Javascript/Jquery——简单定时器的多种实现方法
Jul 03 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
微信小程序开发animation心跳动画效果
Aug 16 Javascript
ES6之模版字符串的具体使用
May 17 Javascript
vue自定义指令的创建和使用方法实例分析
Dec 04 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
原生JS实现九宫格抽奖
Sep 13 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
phpMyAdmin 安装及问题总结
2009/05/28 PHP
深入解析php之sphinx
2013/05/15 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
2020/07/24 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
详解Python中time()方法的使用的教程
2015/05/22 Python
python发送邮件实例分享
2017/07/28 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
Python反射的用法实例分析
2018/02/11 Python
python实战教程之自动扫雷
2018/07/13 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
python批量修改xml属性的实现方式
2020/03/05 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
大学毕业生通用自我评价
2014/01/05 职场文书
房地产开发计划书
2014/01/10 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
python实现MD5进行文件去重的示例代码
2021/07/09 Python