<template>
<div class="content">
<div id="shareTop">
<div>
<img src="@/assets/imgs/myBg.png" style="width:100%" alt="">
</div>
</div>
<van-index-bar :index-list="indexList" :sticky-offset-top="50" @select="select" :z-index="zIndex">
<div v-for="(item,index) of indexList" :key="index">
<van-index-anchor class="anchor" :index="item"/>
<p style="text-align: left;">{{item}}</p>
<van-cell v-for="i of 15" :key="i" :title="'文本'+i" />
</div>
</van-index-bar>
</div>
</template>
<script>
export default {
data() {
return {
indexList: ["产品介绍", "投保须知", "服务约定", "理赔流程"],
height:200,//索引内容区域距离顶部的高度
zIndex:"-1",
};
},
mounted(){
setTimeout(()=>{
let height=document.querySelector(".van-index-bar").offsetTop;
this.height=height-50;
},10)
window.addEventListener('scroll',this.scrollPosition);
},
destroyed() { //销毁
window.removeEventListener("scroll",this.scrollPosition);
},
methods:{
scrollPosition(){
let scrollTop=document.documentElement.scrollTop || document.body.scrollTop//滚动条滚动时,距离顶部的距离
console.log(scrollTop,this.height)
if(scrollTop>=this.height && this.zIndex!="1"){
this.zIndex="1";
return;
}else if(scrollTop<this.height && this.zIndex!="-1"){
this.zIndex="-1";
return;
}
},
select(e){
console.log(e,"sssssssssssss");
document.body.scrollTop +=1;
document.documentElement.scrollTop +=1;
},
change(e){
console.log(e,"eeeeeeeeee")
}
},
watch:{
}
}
</script>
<style scoped>
.content /deep/ .van-index-bar__sidebar{
top: 0;
transform: translateY(0);
left: 0;
right: 0;
flex-direction: row;
justify-content: space-between;
background: #fff;
}
.content /deep/ .van-index-bar__index{
height: 50px;
line-height: 50px;
flex: auto;
padding: 0;
}
.content /deep/ .van-index-bar__index--active{
background: #f00;
color: #fff;
}
.content /deep/ .van-index-anchor--sticky,.content /deep/ .van-index-anchor{
opacity: 0;
}
.anchor{
height: 0 !important;
}
</style>