vue+element實(shí)現(xiàn)錨點(diǎn)鏈接方式
vue+element錨點(diǎn)鏈接
代碼塊
<el-row id="userManagement"> <h1 @click="jump('userManagement')">用戶管理</h1> <el-col :span="24">為了正常使用知產(chǎn)魔方,您需要在用戶管理模塊中,為代理所內(nèi)部用戶、外部用戶開通知產(chǎn)魔方使用權(quán)限。</el-col> </el-row>
export default { methods:{ jump(domId){ // 當(dāng)前窗口正中心位置到指定dom位置的距離 //頁面滾動(dòng)了的距離 let height = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; //指定dom到頁面頂端的距離 let dom = document.getElementById(domId); let domHeight = dom.offsetTop; //滾動(dòng)距離計(jì)算 var S = Number(height) - Number(domHeight); //判斷上滾還是下滾 if(S<0){ //下滾 S = Math.abs(S); //Math.abs返回一個(gè)數(shù)的絕對(duì)值 //window.scrollBy:把內(nèi)容滾動(dòng)到指定的像素?cái)?shù) window.scrollBy({ top: S, behavior: "smooth" }); }else if(S==0){ //不滾 window.scrollBy({ top: 0, behavior: "smooth" }); }else{ //上滾 S = -S window.scrollBy({ top: S, behavior: "smooth" }); } } }, created() {} }
效果圖
vue+element錨點(diǎn)跳轉(zhuǎn)+自動(dòng)感應(yīng)導(dǎo)航欄
最近來個(gè)需求,要做一個(gè)頁面,每個(gè)模塊都是百分百全屏且右側(cè)有個(gè)導(dǎo)航欄能自動(dòng)感應(yīng)在哪個(gè)模塊,點(diǎn)擊也能直接跳轉(zhuǎn)到該錨點(diǎn)。
其實(shí)難點(diǎn)也就那幾個(gè),慢慢捋一下就好,話不多說上代碼?。?/p>
1、錨點(diǎn)跳轉(zhuǎn)且點(diǎn)擊哪個(gè)會(huì)模塊右側(cè)導(dǎo)航欄就會(huì)高亮
我這個(gè)導(dǎo)航欄是因?yàn)槲磥碓黾幽K以免還要自己手動(dòng)加了就直接調(diào)接口循環(huán)了,如果是固定的直接寫死也行,看見那個(gè):key=“key”了沒,對(duì),你想的沒錯(cuò),跟那個(gè)沒關(guān)系,好了,不開玩笑了,那個(gè)給他動(dòng)態(tài)賦予class的屬性才是正確答案。
思路
使用循環(huán)的key與點(diǎn)擊后傳過去的key做對(duì)比,如果一樣的話就給他添加相應(yīng)的css。
具體實(shí)現(xiàn)
把傳過去的key賦值給一個(gè)data里面的變量例如:index,然后在標(biāo)簽里使用三目運(yùn)算符進(jìn)行判斷
這個(gè)也不算難點(diǎn) ,還有很多種實(shí)現(xiàn)方法,比如通過路由判斷、還有通過傳路由判斷,看個(gè)人喜歡與習(xí)慣吧。
2、關(guān)于翻頁自動(dòng)感應(yīng)
思路
前面說了,我們是使用index來控導(dǎo)航欄中哪個(gè)模塊高亮的
當(dāng)鼠標(biāo)往下滾動(dòng)時(shí)讓整個(gè)頁面往下滾動(dòng)整個(gè)頁面的高度且index加一反之減一
具體實(shí)現(xiàn)
<div @mousewheel="mouseWheel"></div> mouseWheel(e) { if (e.wheelDelta || e.detail) { if (e.wheelDelta > 0 || e.detail < 0) { // 當(dāng)鼠標(biāo)向上滾動(dòng)時(shí)觸發(fā) } if (e.wheelDelta < 0 || e.detail > 0) { // 當(dāng)鼠標(biāo)向下滾動(dòng)時(shí)觸發(fā) } } }
在最外層容器中加入這個(gè)鼠標(biāo)觸發(fā)事件
然后就可以監(jiān)聽鼠標(biāo)滾輪向上還是向下了
呃…想詳細(xì)了解的朋友自行百度哈,這里不過多贅述
當(dāng)鼠標(biāo)向下滾動(dòng)時(shí)我們使用
window.scrollTo(x,y);
來讓頁面進(jìn)行滾動(dòng)且讓index加一反則減一
這樣一來就能實(shí)現(xiàn)導(dǎo)航欄的自動(dòng)感應(yīng)了
但是要注重幾個(gè)細(xì)節(jié)問題
- 第一、當(dāng)你到達(dá)了頂部或者底部時(shí)需要重置你的index
- 第二、你加的高度變量要重置
- 第三、滾到底部或者頂部時(shí)需要取消終止?jié)L動(dòng)函數(shù)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue-resource post數(shù)據(jù)時(shí)碰到Django csrf問題的解決
這篇文章主要介紹了vue-resource post數(shù)據(jù)時(shí)碰到Django csrf問題的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-03-03Vue中Vue-Baidu-Map基本使用方法實(shí)例
最近有一個(gè)項(xiàng)目需要用到地圖來展示位置并進(jìn)行數(shù)據(jù)交互,用vue-baidu-map實(shí)現(xiàn)出來,下面這篇文章主要給大家介紹了關(guān)于Vue中Vue-Baidu-Map基本使用的相關(guān)資料,需要的朋友可以參考下2023-03-03Vue如何處理圖片加載失敗時(shí)自動(dòng)替換備用圖片
這篇文章主要為大家詳細(xì)介紹了當(dāng)圖片加載失敗時(shí),Vue如何實(shí)現(xiàn)自動(dòng)替換備用圖片功能,文中的示例代碼簡(jiǎn)潔易懂,有需要的小伙伴可以了解下2024-11-11vue-admin如何實(shí)現(xiàn)動(dòng)態(tài)路由
這篇文章主要介紹了vue-admin如何實(shí)現(xiàn)動(dòng)態(tài)路由問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07