vue3手動(dòng)設(shè)置滾動(dòng)條位置自動(dòng)定位功能
從B頁(yè)面進(jìn)行xx操作后需要跳轉(zhuǎn)到A頁(yè)面，并定位到AA職位，上圖為A頁(yè)面。
A頁(yè)面的左側(cè)是div，內(nèi)層包裹List組件
給div定義ref=leftRef,在代碼中寫(xiě)如下：
? 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，這樣頁(yè)面初始化滾動(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的，通過(guò)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)起來(lái)
選中含有滾動(dòng)條的元素，定義一個(gè)const leftRef = ref(null)，在數(shù)據(jù)加載完成后設(shè)置leftRef.value.scrollTop
滾動(dòng)條的位置
等待數(shù)據(jù)加載完后獲取當(dāng)前選中的元素，通過(guò).offsetHeight獲取元素的高度
到此這篇關(guān)于vue3手動(dòng)設(shè)置滾動(dòng)條位置自動(dòng)定位功能的文章就介紹到這了,更多相關(guān)vue手動(dòng)設(shè)置滾動(dòng)條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue如何引入全局過(guò)濾器問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue.js第二天學(xué)習(xí)筆記（vue-router）
這篇文章主要為大家詳細(xì)介紹了Vue.js第二天的學(xué)習(xí)筆記，關(guān)于vue-router的使用方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了vue的面包屑導(dǎo)航組件，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
vue.js高德地圖實(shí)現(xiàn)熱點(diǎn)圖代碼實(shí)例
這篇文章主要介紹了vue.js高德地圖實(shí)現(xiàn)熱點(diǎn)圖，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue history 模式打包部署在域名的二級(jí)目錄的配置指南
這篇文章主要介紹了vue history 模式打包部署在域名的二級(jí)目錄的配置指南 ，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
vue中使用go()和back()兩種返回上一頁(yè)的區(qū)別說(shuō)明
這篇文章主要介紹了vue中使用go()和back()兩種返回上一頁(yè)的區(qū)別說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
在使用uni-data-select插件時(shí)通過(guò)接口獲取值賦給localdata失敗的問(wèn)題解決方案
在加載渲染時(shí),調(diào)取接口請(qǐng)求的是一個(gè)異步的操作,在子組件拿到數(shù)據(jù)前就渲染了,才導(dǎo)致子組件watch沒(méi)有監(jiān)聽(tīng)到值的變化,下面給大家介紹在使用uni-data-select插件時(shí)通過(guò)接口獲取值賦給localdata失敗的問(wèn)題,感興趣的朋友一起看看吧2024-12-12
Vue無(wú)后端配合實(shí)現(xiàn)導(dǎo)出功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue如何在無(wú)后端配合的情況下實(shí)現(xiàn)導(dǎo)出功能,文中的示例代碼簡(jiǎn)潔易懂,有需要的小伙伴可以跟隨小編一起了解一下2024-01-01
Vue-cli assets SubDirectory及PublicPath區(qū)別詳解
這篇文章主要介紹了Vue-cli assets SubDirectory及PublicPath區(qū)別詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
詳解vue+axios給開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境配置不同的接口地址
這篇文章主要介紹了詳解vue+axios給開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境配置不同的接口地址，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08