如何在vue專案中使用錨點連線

2021-10-25 08:54:46 字數 1312 閱讀 5013

前段時間在做官網專案的時候,遇到錨點鏈結跳轉的操作,使用傳統的 a標籤,也試過js的 scrollintoview()方法,都沒能很好的解決我的問題。於是結合網上各種文章並做了調整之後,發現此方法挺好用的,在此記錄:

// html部分沒什麼好說的

// 需要注意 activeclick()這塊,'block': 標籤名字 index: 下標 50: 每次滾動的距離

="top" id=

"boxfixed"

:class=""

>

"margin-right:57px;"

>品類<

/li>

v-for=

"(i, index) in list"

:key=

"index"

@click=

"activeclick('block'+ index, 50, index)"

:class=""

>

}<

/a>

<

/li>

<

/ul>

<

/div>

"block0"

>

<

/jj>

<

/div>

"block1"

>

<

/mj>

<

/div>

"block2"

>

<

/cj>

<

/div>

"block3"

>

<

/jk>

<

/div>

"block4"

>

<

/other>

<

/div>

// js部分

export

default,,

,,,]

}},mounted()

)}, methods:

,//el 標籤 speed 滾動速率 此處是50px 值越大滾動的越快

activeclick

(el, spend, index)

else

//向下滾動

currenttop += spend

}else

else

//向上滾動

currenttop -= spend

}}}}}

<

/script>

在此附上github專案位址,有需要的朋友可自行檢視:

vue專案中使用heyui,如何在全域性配置主題色彩

1 在src資料夾下新建資料夾,命名為common 2 在common資料夾下新建less檔案,命名為common.less 3 將此段 複製到common.less檔案中 ps 具體色值根據個人需求設定 import less heyui themes var.less 重新定義主題 primar...

如何在vue專案中使用md5加密

md5 資訊 摘要演算法,是讓大容量資訊在用數字簽名軟體簽署私人密匙前被 壓縮 成一種保密的格式 一般我們把登入和註冊資訊的密碼進行加密 1.安裝模組 npm install js md5 d2.在專案中引入模組 import md5 from js md5 3.把你需要加密的資訊進行前期處理 ca...

如何在Flutter專案中使用GraphQL

麼是graphql 這篇文章主要是看一下如何在flutter專案中使用graphql,如果不清楚graphql是什麼,建議先看下官網對其介紹 從圖中也能看出,分3部分 可以看出,在這個graphql server中,我們可以查詢 continents continent countries coun...