vueスライドトップとアンカーポイントの位置付けの例コード
2733 ワード
前の記事では、Vueが吸頂、アンカーポイント、スクロールハイライトの効果を実現したと紹介しました。 興味のある友達はクリックしてhttps://www.jb51.net/article/172365.htmを見ることができます。
今日は引き続きVueスライドトップとアンカーポイントの位置付けコードを共有します。具体的な内容は以下の通りです。
Vueプロジェクトでは、スライドトップとアンカーの位置付け機能を実現する必要があります。templateコードは以下の通りです。
scrollイベントをモニターし、ページのスクロール距離を取得し、スクロール距離が目標値より大きいと、スライドトップ機能を実現します。
ここで、vueスライドトップとアンカーポイントの位置付けの例コードについての記事を紹介します。これに関連して、もっと多いのはvueスライドトップの位置付けの内容です。以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。
今日は引き続きVueスライドトップとアンカーポイントの位置付けコードを共有します。具体的な内容は以下の通りです。
Vueプロジェクトでは、スライドトップとアンカーの位置付け機能を実現する必要があります。templateコードは以下の通りです。
<template>
<div class="main">
<div id='menu'>
<ul>
<li v-for="item in tabList" @click='clickTab'></li>
</ul>
</div>
<div id='div1'></div>
<div id='div2'></div>
<div id='div3'></div>
</div>
</template>
(1)スライドトップ:scrollイベントをモニターし、ページのスクロール距離を取得し、スクロール距離が目標値より大きいと、スライドトップ機能を実現します。
public isFixed = false;
public mounted() {
this.menuTop = (document.getElementById('menu') as any).offsetTop;
window.addEventListener('scroll', this.handleScroll);
}
public handleScroll() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //
if (scrollTop < this.menuTop ) {
this.isFixed = false;
} else {
this.isFixed = true; // fixed
}
}
public destroyed() {
window.removeEventListener('scroll', this.handleScroll);
}
(2)アンカーポイントの位置付け。タブbをクリックして、ページのスクロール距離を設定します。
public clickTab(index: number) {
this.activeIndex = index;
this.isFixed = true;
const menuHeight= (document.getElementById('menu') as any).offsetHeight;
const div1= (document.getElementById('div1') as any).offsetTop;
const div2= (document.getElementById('div2') as any).offsetTop;
const div3= (document.getElementById('div3') as any).offsetTop;
const div4= (document.getElementById('div4') as any).offsetTop;
switch (index) {
case 0: document.body.scrollTop = document.documentElement.scrollTop = div1 - menuHeight; break;
case 1: document.body.scrollTop = document.documentElement.scrollTop = div2 - menuHeight; break;
case 2: document.body.scrollTop = document.documentElement.scrollTop = div3 - menuHeight; break;
case 3: document.body.scrollTop = document.documentElement.scrollTop = div4 - menuHeight; break;
default: document.body.scrollTop = document.documentElement.scrollTop = div1- menuHeight;
}
}
締め括りをつけるここで、vueスライドトップとアンカーポイントの位置付けの例コードについての記事を紹介します。これに関連して、もっと多いのはvueスライドトップの位置付けの内容です。以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。