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

template里面:

• 产品特点
• 投保须知
• 理赔流程

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

第一部分内容

第二部分内容

第三部分内容

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

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位置。

实现效果动图

实现目的——html结构

• >

  { { tabs.tab_menu }}

实现目的——less样式

.tab__div {

width: 100%;