vue tab 일정 높이 로 스크롤 하여 상단 에 고정 시 키 고 tab 를 누 르 면 다른 내용 으로 전환 합 니 다.
<!-- 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 -->
fixttitle 스타일 을 설정 하여 상단 에 고정 시 킵 니 다.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 위치 로 이동 합 니 다.
실현 효과 다이어그램
목적 실현―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 를 누 르 면 서로 다른 내용 을 전환 하 는 작업 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 실 수 있 고 많은 응원 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.