vue+element實現(xiàn)錨點鏈接方式
vue+element錨點鏈接
代碼塊
<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){ // 當前窗口正中心位置到指定dom位置的距離 //頁面滾動了的距離 let height = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; //指定dom到頁面頂端的距離 let dom = document.getElementById(domId); let domHeight = dom.offsetTop; //滾動距離計算 var S = Number(height) - Number(domHeight); //判斷上滾還是下滾 if(S<0){ //下滾 S = Math.abs(S); //Math.abs返回一個數(shù)的絕對值 //window.scrollBy:把內(nè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錨點跳轉(zhuǎn)+自動感應導航欄
最近來個需求,要做一個頁面,每個模塊都是百分百全屏且右側(cè)有個導航欄能自動感應在哪個模塊,點擊也能直接跳轉(zhuǎn)到該錨點。
其實難點也就那幾個,慢慢捋一下就好,話不多說上代碼??!
1、錨點跳轉(zhuǎn)且點擊哪個會模塊右側(cè)導航欄就會高亮
我這個導航欄是因為未來增加模塊以免還要自己手動加了就直接調(diào)接口循環(huán)了,如果是固定的直接寫死也行,看見那個:key=“key”了沒,對,你想的沒錯,跟那個沒關(guān)系,好了,不開玩笑了,那個給他動態(tài)賦予class的屬性才是正確答案。
思路
使用循環(huán)的key與點擊后傳過去的key做對比,如果一樣的話就給他添加相應的css。
具體實現(xiàn)
把傳過去的key賦值給一個data里面的變量例如:index,然后在標簽里使用三目運算符進行判斷
這個也不算難點 ,還有很多種實現(xiàn)方法,比如通過路由判斷、還有通過傳路由判斷,看個人喜歡與習慣吧。
2、關(guān)于翻頁自動感應
思路
前面說了,我們是使用index來控導航欄中哪個模塊高亮的
當鼠標往下滾動時讓整個頁面往下滾動整個頁面的高度且index加一反之減一
具體實現(xiàn)
<div @mousewheel="mouseWheel"></div> mouseWheel(e) { if (e.wheelDelta || e.detail) { if (e.wheelDelta > 0 || e.detail < 0) { // 當鼠標向上滾動時觸發(fā) } if (e.wheelDelta < 0 || e.detail > 0) { // 當鼠標向下滾動時觸發(fā) } } }
在最外層容器中加入這個鼠標觸發(fā)事件
然后就可以監(jiān)聽鼠標滾輪向上還是向下了
呃…想詳細了解的朋友自行百度哈,這里不過多贅述
當鼠標向下滾動時我們使用
window.scrollTo(x,y);
來讓頁面進行滾動且讓index加一反則減一
這樣一來就能實現(xiàn)導航欄的自動感應了
但是要注重幾個細節(jié)問題
- 第一、當你到達了頂部或者底部時需要重置你的index
- 第二、你加的高度變量要重置
- 第三、滾到底部或者頂部時需要取消終止?jié)L動函數(shù)
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue-resource post數(shù)據(jù)時碰到Django csrf問題的解決
這篇文章主要介紹了vue-resource post數(shù)據(jù)時碰到Django csrf問題的解決,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03