欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2022年03月09日 17:17:21   作者:jiyuchengzhou  
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)樓層跳轉(zhuǎn)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(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í)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue中改變滾動(dòng)條樣式的方法

    vue中改變滾動(dòng)條樣式的方法

    這篇文章主要介紹了vue中改變滾動(dòng)條樣式的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-03-03
  • 使用vue中的v-for遍歷二維數(shù)組的方法

    使用vue中的v-for遍歷二維數(shù)組的方法

    下面小編就為大家分享一篇使用vue中的v-for遍歷二維數(shù)組的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • Vue使用electron轉(zhuǎn)換項(xiàng)目成桌面應(yīng)用方法介紹

    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
  • 使用vue3+ts打開echarts的正確方式

    使用vue3+ts打開echarts的正確方式

    這篇文章主要給大家介紹了關(guān)于使用vue3+ts打開echarts的正確方式,在Vue3中使用ECharts組件可以方便地創(chuàng)建各種數(shù)據(jù)可視化圖表,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-12-12
  • 基于Vue+Openlayer實(shí)現(xiàn)動(dòng)態(tài)加載geojson的方法

    基于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-09
  • Vue環(huán)境搭建報(bào)錯(cuò)整理大全

    Vue環(huán)境搭建報(bào)錯(cuò)整理大全

    開發(fā)中遇到bug是在正常不過了,而程序也基本都是bug堆里爬出來的,對(duì)于程序員來說bug調(diào)試也是自己工作的重要組成部分,下面這篇文章主要給大家介紹了關(guān)于Vue環(huán)境搭建報(bào)錯(cuò)整理的相關(guān)資料,需要的朋友可以參考下
    2022-08-08
  • vue相同路由跳轉(zhuǎn)強(qiáng)制刷新該路由組件操作

    vue相同路由跳轉(zhuǎn)強(qiáng)制刷新該路由組件操作

    這篇文章主要介紹了vue相同路由跳轉(zhuǎn)強(qiáng)制刷新該路由組件操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue項(xiàng)目中更改名字和圖標(biāo)的簡單實(shí)現(xiàn)步驟

    vue項(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
  • 淺入深出Vue之組件使用

    淺入深出Vue之組件使用

    這篇文章主要給大家介紹了關(guān)于淺入深出Vue之組件使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-07-07
  • vue?雙向綁定問題$emit無效的解決

    vue?雙向綁定問題$emit無效的解決

    這篇文章主要介紹了vue?雙向綁定問題$emit無效的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09

最新評(píng)論