vue實(shí)現(xiàn)樓層跳轉(zhuǎn)效果
本文實(shí)例為大家分享了vue實(shí)現(xiàn)樓層跳轉(zhuǎn)效果的具體代碼,供大家參考,具體內(nèi)容如下
實(shí)現(xiàn)效果:當(dāng)翻滾頁面時(shí),對(duì)應(yīng)的選項(xiàng)卡也會(huì)進(jìn)行相應(yīng)的變化,點(diǎn)擊選項(xiàng)卡也會(huì)直接跳轉(zhuǎn)到對(duì)應(yīng)的位置
先是獲取對(duì)應(yīng)的dom元素,然后再監(jiān)聽滾動(dòng)事件,判斷符合條件的元素,進(jìn)行改變對(duì)應(yīng)的樓層選項(xiàng)卡位置。
jump方法則是通過點(diǎn)擊直接跳轉(zhuǎn)到對(duì)應(yīng)的位置。
整個(gè)頁面代碼如下:
<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'); ? ? ? ? ? ? // 注冊(cè)滾動(dòng)監(jiān)聽事件 ? ? ? ? ? ? window.onscroll = function() { ? ? ? ? ? ? ? ? // 獲取滾動(dòng)條距離頁面底部的距離 ? ? ? ? ? ? ? ? var tops = document.documentElement.scrollTop || document.body.scrollTop; ? ? ? ? ? ? ? ? // console.log(tops) ? ? ? ? ? ? ? ? //判斷滾動(dòng)的位置,從而改變樓層選項(xiàng)的樣式 ? ? ? ? ? ? ? ? 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)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue跳轉(zhuǎn)頁面的幾種方法(推薦)
- 詳解vue 路由跳轉(zhuǎn)四種方式 (帶參數(shù))
- vue-router跳轉(zhuǎn)時(shí)打開新頁面的兩種方法
- Vue.js實(shí)戰(zhàn)之利用vue-router實(shí)現(xiàn)跳轉(zhuǎn)頁面
- vue實(shí)現(xiàn)未登錄跳轉(zhuǎn)到登錄頁面的方法
- vue從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面并攜帶參數(shù)的解決方法
- Vue-Router實(shí)現(xiàn)組件間跳轉(zhuǎn)的三種方法
- VueJs路由跳轉(zhuǎn)——vue-router的使用詳解
- vue-router跳轉(zhuǎn)頁面的方法
- Vue實(shí)現(xiàn)路由跳轉(zhuǎn)和嵌套
相關(guān)文章
Vue使用electron轉(zhuǎn)換項(xiàng)目成桌面應(yīng)用方法介紹
Electron也可以快速地將你的網(wǎng)站打包成一個(gè)原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Vue和React中快速使用Electron的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11基于Vue+Openlayer實(shí)現(xiàn)動(dòng)態(tài)加載geojson的方法
本文通過實(shí)例代碼給大家介紹基于Vue+Openlayer實(shí)現(xiàn)動(dòng)態(tài)加載geojson的方法,代碼簡單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2021-09-09vue相同路由跳轉(zhuǎn)強(qiáng)制刷新該路由組件操作
這篇文章主要介紹了vue相同路由跳轉(zhuǎn)強(qiáng)制刷新該路由組件操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08vue項(xiàng)目中更改名字和圖標(biāo)的簡單實(shí)現(xiàn)步驟
今天在寫vue項(xiàng)目時(shí)碰到的問題是怎么修改vue的網(wǎng)頁圖標(biāo),所以下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中更改名字和圖標(biāo)的簡單實(shí)現(xiàn),文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08