vue實現(xiàn)樓層跳轉(zhuǎn)效果

更新時間：2022年03月09日 17:17:21 作者：jiyuchengzhou

這篇文章主要為大家詳細介紹了vue實現(xiàn)樓層跳轉(zhuǎn)效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)樓層跳轉(zhuǎn)效果的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)效果：當翻滾頁面時，對應的選項卡也會進行相應的變化，點擊選項卡也會直接跳轉(zhuǎn)到對應的位置

先是獲取對應的dom元素，然后再監(jiān)聽滾動事件，判斷符合條件的元素，進行改變對應的樓層選項卡位置。

jump方法則是通過點擊直接跳轉(zhuǎn)到對應的位置。

整個頁面代碼如下：

<template>
? <div>
? ? ? <h1>這是樓層測試的頁面</h1>
? ? ? <!-- 這是流程的目錄 -->
? ? ? <div class="totalM">
? ? ? ? ? <div class="menu" @click="jump(0)" :class="[num==0?'sele':'']">1</div>
? ? ? ? ? <div class="menu" @click="jump(1)" :class="[num==1?'sele':'']">2</div>
? ? ? ? ? <div class="menu" @click="jump(2)" :class="[num==2?'sele':'']">3</div>
? ? ? ? ? <div class="menu" @click="jump(3)" :class="[num==3?'sele':'']">4</div>
? ? ? ? ? <div class="menu" @click="jump(4)" :class="[num==4?'sele':'']">5</div>
? ? ? </div>
? ? ? <!-- 這是樓層的內(nèi)容 -->
? ? ? <div>
? ? ? ? <div class="h-800" style="background:red;"><h1>1</h1></div>
? ? ? ? <div class="h-800" style="background:yellow;"><h1>2</h1></div>
? ? ? ? <div class="h-800" style="background:blue;"><h1>3</h1></div>
? ? ? ? <div class="h-800" style="background:black;"><h1>4</h1></div>
? ? ? ? <div class="h-800" style="background:pink;"><h1>5</h1></div>
? ? ? </div>
? </div>
</template>

<script>
export default {
? ? data() {
? ? ? ? return {
? ? ? ? ? ? num:0,
? ? ? ? }
? ? },
? ? created() {
? ? ? ? var that=this
? ? ? ? var inner = document.getElementsByClassName('h-800');
? ? ? ? ? ? // 注冊滾動監(jiān)聽事件
? ? ? ? ? ? window.onscroll = function() {
? ? ? ? ? ? ? ? // 獲取滾動條距離頁面底部的距離
? ? ? ? ? ? ? ? var tops = document.documentElement.scrollTop || document.body.scrollTop;
? ? ? ? ? ? ? ? // console.log(tops)
? ? ? ? ? ? ? ? //判斷滾動的位置，從而改變樓層選項的樣式
? ? ? ? ? ? ? ? for(var i = 0; i < inner.length; i++) {
? ? ? ? ? ? ? ? ? ? if(inner[i].offsetTop <= tops+200 && tops<=inner[i].offsetTop) {
? ? ? ? ? ? ? ? ? ? ? ? that.num=i
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }

? ? },
? ? methods: {
? ? ? ? // 樓層跳轉(zhuǎn)的方法index
? ? ? ? jump(index){
? ? ? ? ? ? this.num=index
? ? ? ? ? ? var body = document.getElementsByTagName('body')[0];
? ? ? ? ? ? ? // 獲取所有的樓層
? ? ? ? ? ? var inner = document.getElementsByClassName('h-800');
? ? ? ? ? ? console.log(body)
? ? ? ? ? ? console.log(inner)
? ? ? ? ? ? console.log(index)
? ? ? ? ? ? console.log(inner[index].offsetTop)
? ? ? ? ? ? window.scrollTo(0,inner[index].offsetTop)
? ? ? ? ? ? // document.body.scrollTop=inner[index].offsetTop
? ? ? ? ? ? console.log(body.scrollTop)
? ? ? ? }
? ? },

}
</script>

<style scoped>
.h-800{
? ? width: 100%;
? ? height: 500px;
}
.totalM{
? ? position: fixed;
? ? width:100px;
? ? background:gray;
? ? right:100px;
? ? bottom:100px;
}
.menu{
? ? /* margin-bottom:10px; */
}
.sele{
? ? background:white;
}
</style>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

使用yarn?build?打包vue項目時靜態(tài)文件或圖片未打包成功的問題及解決方法
這篇文章主要介紹了使用yarn?build?打包vue項目時靜態(tài)文件或圖片未打包成功的問題及解決方法，解決方法不復雜通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下
2023-08-08
Vuejs第十二篇之動態(tài)組件全面解析
組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。接下來通過本文給大家介紹Vuejs第十二篇之動態(tài)組件，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧
2016-09-09
基于Vue3制作簡單的消消樂游戲
這篇文章主要為大家介紹了如何利用Vue3制作簡單的消消樂游戲，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起動手試一試
2022-05-05
Vue iview-admin框架二級菜單改為三級菜單的方法
這篇文章主要介紹了Vue iview-admin框架二級菜單改為三級菜單的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
深入理解Vue3響應式原理
響應式就是當對象本身(對象的增刪值)或者對象屬性(重新賦值)發(fā)生變化時,將會運行一些函數(shù),最常見的就是render函數(shù),下面這篇文章主要給大家介紹了關于Vue3響應式原理的相關資料,需要的朋友可以參考下
2022-12-12
詳解vue 命名視圖
這篇文章主要介紹了vue 命名視圖的相關知識，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-08-08
vuejs父子組件之間數(shù)據(jù)交互詳解
這篇文章主要為大家詳細介紹了vuejs父子組件之間的數(shù)據(jù)交互，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
vue實現(xiàn)路由懶加載及組件懶加載的方式
懶加載簡單來說就是延遲加載或按需加載，即在需要的時候的時候進行加載。這篇文章主要介紹了vue路由懶加載及組件懶加載 ,需要的朋友可以參考下
2019-06-06
Vue實現(xiàn)封裝樹狀圖的示例代碼
這篇文章主要為大家詳細介紹了如何使用Vue實現(xiàn)封裝樹狀圖,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下
2024-03-03
Vue兼容ie9的問題全面解決方案
這篇文章主要介紹了Vue兼容ie9的問題全面解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-06-06