export default {
data() {
return {
tabs: ["tab1", "tab2", "tab3"],
active: 0,
};
},
methods: {
switchTab(type,index) {
this.active = index
const scrollItem = this.$refs[type]
scrollItem.scrollIntiView({
block:"start",
behaivor:'smooth'
})
}
},
mounted() {
const tabH = this.$refs['tab'].offsetHeight()
this.$refs["cont"].addEventListener("scroll", () => {
this.tabs.forEach((item,index)=>{
let topHeight = this.$refs[item].getBoundingClientRect().top
if(topHeight<=tabH){
this.active = index
}
});
}
};
.box { font-size: 28px; overflow-x: auto; height: 100vh; display: -webkit-flex; display: flex; flex-direction: column; overflow-y: hidden; .tab { height: 88px; background: #fff; line-height: 88px; color: #666; display: -webkit-flex; display: flex; justify-content: space-around; .active { font-size: 32px; color: #333; &::after { display: block; content: ""; width: 36px; height: 6px; margin: auto; margin-top: -10px; background: rgba(255, 51, 0, 1); border-radius: 3px; } } } .cont { height: 300px; flex-grow: 1; overflow: auto; .cont\_1 { height: 400px; background: pink; } .cont\_2 { height: 800px; background: yellow; } .cont\_3 { height: 100%; background: lightgreen; } } .back-top { width: 80px; height: 80px; background: url(../../assets/back-top.png) center / 100% 100% no-repeat; border-radius: 50%; position: fixed; bottom: 120px; right: 32px; } }
