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)魔方使用權限。</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錨點跳轉+自動感應導航欄
最近來個需求,要做一個頁面,每個模塊都是百分百全屏且右側有個導航欄能自動感應在哪個模塊,點擊也能直接跳轉到該錨點。
其實難點也就那幾個,慢慢捋一下就好,話不多說上代碼??!
1、錨點跳轉且點擊哪個會模塊右側導航欄就會高亮

我這個導航欄是因為未來增加模塊以免還要自己手動加了就直接調(diào)接口循環(huán)了,如果是固定的直接寫死也行,看見那個:key=“key”了沒,對,你想的沒錯,跟那個沒關系,好了,不開玩笑了,那個給他動態(tài)賦予class的屬性才是正確答案。
思路
使用循環(huán)的key與點擊后傳過去的key做對比,如果一樣的話就給他添加相應的css。
具體實現(xiàn)
把傳過去的key賦值給一個data里面的變量例如:index,然后在標簽里使用三目運算符進行判斷
這個也不算難點 ,還有很多種實現(xiàn)方法,比如通過路由判斷、還有通過傳路由判斷,看個人喜歡與習慣吧。
2、關于翻頁自動感應
思路
前面說了,我們是使用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ù)
總結
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
詳解vue結合el-table實現(xiàn)表格小計總計需求(summary-method)
這篇文章主要介紹了vue結合el-table實現(xiàn)表格小計總計需求(summary-method),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
代替Vue?Cli的全新腳手架工具create?vue示例解析
這篇文章主要為大家介紹了代替Vue?Cli的全新腳手架工具create?vue示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10
uniapp中使用u-loadmore,loadText內(nèi)容不隨status改變刷新方式
這篇文章主要介紹了uniapp中使用u-loadmore,loadText內(nèi)容不隨status改變刷新方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05

