前端vue3手動(dòng)設(shè)置滾動(dòng)條位置/自動(dòng)定位詳細(xì)代碼
從B頁面進(jìn)行xx操作后需要跳轉(zhuǎn)到A頁面,并定位到AA職位,上圖為A頁面。
A頁面的左側(cè)是div,內(nèi)層包裹List組件
給div定義ref=leftRef,在代碼中寫如下:
function scrollTop() { if (leftRef.value) { console.log('99', leftRef.value); nextTick(() => { leftRef.value.scrollTop = 1000; // scrollBy(0, document.body.scrollWidth); }); } } onMounted(async () => { if (router.currentRoute.value.query.id) { positionChooseCode.value = router.currentRoute.value.query.id; positionStatusValue.value = router.currentRoute.value.query.id; } const positionId = router.currentRoute.value.query.positionId; if (!!positionId) { cStore.setPositionId(positionId); } console.log('mounted--positionId', positionId); await getPositionDictionary(positionChooseCode.value, ''); await getDictionaries(); scrollTop(); });
第一,需要等待數(shù)據(jù)渲染完成后,再調(diào)用scrollTop,設(shè)置scrollTop=1000,這樣頁面初始化滾動(dòng)條位置會(huì)改變。
第二,找到當(dāng)前職位的高度,也要等職位列表數(shù)據(jù)渲染完成后,獲取
console.log('positionList.value', positionList.value); rowItemId.value = item.id; //找到前面有多少個(gè)元素 let index = positionList.value.findIndex((it) => it.id === rowItemId.value); console.log('找到前面有多少個(gè)元素', index + 1); num.value = index - 2; 獲取當(dāng)前職位,當(dāng)前職位會(huì)有class==red的,通過class獲取ele; const sortableEles = document.querySelectorAll('.red'); console.log(sortableEles); let itemHeight = 0; if (sortableEles.length > 0) { const firstListItem = sortableEles[0]; itemHeight = firstListItem.offsetHeight; // 獲取元素的高度,包括內(nèi)邊距和邊框 console.log('第一個(gè)列表項(xiàng)的高度:', itemHeight); console.log(' num.value', num.value); }
完整的scrollTop方法如下
總結(jié):
滾動(dòng)條要滾動(dòng)起來
選中含有滾動(dòng)條的元素,定義一個(gè)const leftRef = ref(null),在數(shù)據(jù)加載完成后設(shè)置leftRef.value.scrollTop
滾動(dòng)條的位置
等待數(shù)據(jù)加載完后獲取當(dāng)前選中的元素,通過.offsetHeight獲取元素的高度
到此這篇關(guān)于前端vue3手動(dòng)設(shè)置滾動(dòng)條位置/自動(dòng)定位的文章就介紹到這了,更多相關(guān)vue3手動(dòng)設(shè)置滾動(dòng)條位置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue動(dòng)態(tài)添加屬性到data的實(shí)現(xiàn)
在vue中請求接口中,一個(gè)請求方法可能對應(yīng)后臺(tái)兩個(gè)請求接口,所以請求參數(shù)就會(huì)有所不同。需要我們先設(shè)置共同的參數(shù),然后根據(jù)條件動(dòng)態(tài)添加參數(shù)屬性2022-08-08elementui實(shí)現(xiàn)預(yù)覽圖片組件二次封裝
這篇文章主要介紹了elementui實(shí)現(xiàn)預(yù)覽圖片組件二次封裝的方法 ,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2020-12-12如何利用vue3實(shí)現(xiàn)一個(gè)俄羅斯方塊
俄羅斯方塊這個(gè)游戲相信大家都玩過,下面這篇文章主要給大家介紹了關(guān)于如何利用vue3實(shí)現(xiàn)一個(gè)俄羅斯方塊的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01Vue環(huán)境搭建+VSCode+Win10的詳細(xì)教程
這篇文章主要介紹了Vue環(huán)境搭建+VSCode+Win10,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08使用Vue3和Plotly.js繪制動(dòng)態(tài)3D圖表的示例代碼
在數(shù)據(jù)可視化應(yīng)用中,需要將數(shù)據(jù)動(dòng)態(tài)加載到圖表中并進(jìn)行實(shí)時(shí)更新,本文將展示如何使用Plotly.js和Vue.js實(shí)現(xiàn)這一功能,從加載外部數(shù)據(jù)到創(chuàng)建交互式圖表,文中有相關(guān)的代碼示例供大家參考,需要的朋友可以參考下2024-06-06基于vue2框架的機(jī)器人自動(dòng)回復(fù)mini-project實(shí)例代碼
本篇文章主要介紹了基于vue2框架的機(jī)器人自動(dòng)回復(fù)mini-project實(shí)例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下2017-06-06el-select如何獲取當(dāng)前選中的對象所有(item)數(shù)據(jù)
在開發(fā)業(yè)務(wù)場景中我們通常遇到一些奇怪的需求,下面這篇文章主要給大家介紹了關(guān)于el-select如何獲取當(dāng)前選中的對象所有(item)數(shù)據(jù)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11Electron自動(dòng)更新失效報(bào)錯(cuò)Error:?Object?has?been?destroyed的問題解決
本文主要講解如何解決?Error:?Object?has?been?destroyed?這個(gè)?Electron?中最常見的問題,以及?Electron?自動(dòng)更新的流程,文中通過代碼示例給大家講解的非常詳細(xì),需要的朋友可以參考下2024-01-01