vue中的錨點(diǎn)定位問(wèn)題
更新時(shí)間：2022年09月16日 10:30:36 作者：女程序媛的修煉筆記
這篇文章主要介紹了vue中的錨點(diǎn)定位問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue錨點(diǎn)定位
錨點(diǎn)定位與平滑滾動(dòng)反定位支持
代碼如下
html
<div style="display: flex;height: 442px;"> ? ? ? ? ? ? ? ? ? ? ? ?<el-tabs v-model="activeTabs" class="zxtabsStyle" tab-position="left" @tab-click="tabshandleClick"> ? ? ? ? ? ? ? ? ? ? ? ? <el-tab-pane label="主要致險(xiǎn)情景" name="zxqj"></el-tab-pane> ? ? ? ? ? ? ? ? ? ? ? ? <el-tab-pane label="風(fēng)險(xiǎn)防控基本要求" name="yq"></el-tab-pane> ? ? ? ? ? ? ? ? ? ? ? ? <el-tab-pane label="管理措施" name="glcs"></el-tab-pane> ? ? ? ? ? ? ? ? ? ? ? ?</el-tabs> ? ? ? ? ? ? ? ? ? ? ? ?<div> ?//要切換滾動(dòng)的內(nèi)容區(qū)域 <div class="con_tab" ref="content"> ?? ?<div id="zxqj" class="conBlock">介紹</div> ?? ?<div id="yq" class="conBlock">課程目錄</div> ?? ?<div id="glcs" class="conBlock">課后福利</div> </div>
js
mounted(){
//1.mounted里面自動(dòng)監(jiān)聽(tīng)滾動(dòng)事件 ? 代碼如下
this.$refs.content.onscroll = ()=>{
? ? ?this.handleScroll();
?}
},
methods:{
? ? ? ? handleScroll () {
? ? ?let scrollTop = this.$refs.content.scrollTop;
? ? ? let blocks = document.querySelectorAll('.conBlock');
? ? ? blocks.forEach((item, index) => {
? ? ? ? console.log("blocks",item.id)
? ? ? ? ? if (scrollTop >= item.offsetTop) {
? ? ? ? ? ? ? this.activeTabs = item.id;
? ? ? ? ? }
? ? ? })
? },
? ? ? ? ?tabshandleClick(data){
? ? ? ? ? ? console.log("data",data)
? ? ? ? ? ? let index=Number(data.index)
? ? let blocks = document.querySelectorAll('.conBlock');
? ? let step = 40;//滾動(dòng)步長(zhǎng)
? ? let currentScrollTop = this.$refs.content.scrollTop;
? ? let targetOffsetTop = blocks[index].offsetTop;
? ? console.log("currentScrollTop",currentScrollTop);
? ? console.log("targetOffsetTop",targetOffsetTop);
? ? if(currentScrollTop > targetOffsetTop){
? ? ? ? const smoothUp = ()=>{
? ? ? ? ? ? if(currentScrollTop >= targetOffsetTop){
? ? ? ? ? ? ? ? if (currentScrollTop - targetOffsetTop >= step) {
? ? ? ? ? ? ? ? ? ? currentScrollTop -= step;
? ? ? ? ? ? ? ? ? ? setTimeout(smoothUp,1);
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? currentScrollTop = targetOffsetTop-step;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.$refs.content.scrollTop = currentScrollTop;
? ? ? ? ? ? }
? ? ? ? };
? ? ? ? smoothUp();
? ? }else{
? ? ? ? const smoothDown = ()=>{
? ? ? ? ? ? if (currentScrollTop <= targetOffsetTop) {
? ? ? ? ? ? ? ? // 如果和目標(biāo)相差距離大于等于step 就跳 step
? ? ? ? ? ? ? ? if (targetOffsetTop - currentScrollTop >= step) {
? ? ? ? ? ? ? ? ? ? currentScrollTop += step;
? ? ? ? ? ? ? ? ? ? setTimeout(smoothDown,1);
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? // 否則直接跳到目標(biāo)點(diǎn)，防止跳過(guò)
? ? ? ? ? ? ? ? ? ? currentScrollTop = targetOffsetTop-step;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.$refs.content.scrollTop = currentScrollTop;
? ? ? ? ? ? }
? ? ? ? };
? ? ? ? smoothDown();
? ? }
},
}錨點(diǎn)定位bug無(wú)效和替代方式
在vue項(xiàng)目中，使用錨點(diǎn)定位會(huì)和router的規(guī)則沖突，在項(xiàng)目中的表現(xiàn)就是第一次點(diǎn)擊url改變了，但是沒(méi)有跳轉(zhuǎn)到錨點(diǎn)位置，再次點(diǎn)擊才會(huì)跳轉(zhuǎn)。
在vue項(xiàng)目中定義一個(gè)方法不適用錨點(diǎn)定位
scrollToSection(id) {
? ?let section = document.getElementById(id)
? ?if (section) {
? ? ? section.scrollIntoView()
? ?}
}html標(biāo)簽中綁定click事件就可以了
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue3?錨點(diǎn)定位的多種實(shí)現(xiàn)方式
- vue3錨點(diǎn)定位兩種實(shí)現(xiàn)方式示例
- vue中如何實(shí)現(xiàn)錨點(diǎn)定位平滑滾動(dòng)
- vue+element ui實(shí)現(xiàn)錨點(diǎn)定位
- vue實(shí)現(xiàn)錨點(diǎn)定位功能
- vue滑動(dòng)吸頂及錨點(diǎn)定位的示例代碼
- Vue監(jiān)聽(tīng)滾動(dòng)實(shí)現(xiàn)錨點(diǎn)定位(雙向)示例
- 詳解Vue項(xiàng)目中實(shí)現(xiàn)錨點(diǎn)定位
- vue3錨點(diǎn)定位多種方法詳解
相關(guān)文章
vue3中項(xiàng)目?jī)?yōu)化方法詳解(Web?Worker的使用)
最近在做vue3的項(xiàng)目中,遇到了計(jì)算量龐大導(dǎo)致頁(yè)面響應(yīng)緩慢的問(wèn)題,所以下面這篇文章主要給大家介紹了關(guān)于vue3中項(xiàng)目?jī)?yōu)化方法的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
快速將Vue項(xiàng)目升級(jí)到webpack3的方法步驟
這篇文章主要給大家介紹了關(guān)于如何快速將Vue項(xiàng)目升級(jí)到webpack3的方法步驟文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09
這篇文章主要介紹了vue?scoped與深度選擇器deep的原理分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue實(shí)現(xiàn)el-select的change事件過(guò)程
這篇文章主要介紹了vue實(shí)現(xiàn)el-select的change事件過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue3解析markdown并實(shí)現(xiàn)代碼高亮顯示的詳細(xì)步驟
Vue的markdown解析庫(kù)有很多，如markdown-it、vue-markdown-loader、marked、vue-markdown等，這篇文章主要介紹了Vue3解析markdown并實(shí)現(xiàn)代碼高亮顯示,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue組件通信傳值操作,結(jié)合實(shí)例形式分析了vue.js父子組件通信及兄弟組件通信相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
Vue3之使用js實(shí)現(xiàn)動(dòng)畫(huà)示例解析
這篇文章主要為大家介紹了Vue3之使用js實(shí)現(xiàn)動(dòng)畫(huà)示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
vue實(shí)現(xiàn)在頁(yè)面上添加水印的示例代碼
這篇文章主要給大家介紹一下vue實(shí)現(xiàn)在頁(yè)面上添加水印的實(shí)例,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,感興趣的小伙伴跟著小編一起來(lái)看看吧2023-12-12
本文給大家?guī)?lái)了vue中錨點(diǎn)的三種方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧2018-07-07
這篇文章主要為大家詳細(xì)介紹了vue+elementUi圖片上傳組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08