vue實(shí)現(xiàn)跨頁面定位錨點(diǎn)區(qū)域方式
實(shí)際企業(yè)項(xiàng)目開發(fā)中，如何基于Vue2，利用錨點(diǎn)實(shí)現(xiàn)元素區(qū)域滾動定位
項(xiàng)目需求
- 點(diǎn)擊左菜單，實(shí)現(xiàn)右邊內(nèi)容區(qū)域滾動定位；
- 管理頁，可以預(yù)覽該頁，并根據(jù)預(yù)覽內(nèi)容的id定位到滾動區(qū)域；
需求分析并實(shí)現(xiàn)
需求一
點(diǎn)擊左菜單，實(shí)現(xiàn)右邊內(nèi)容區(qū)域滾動定位
1、如果你使用的是ant-design Vue UI庫，是可以使用自帶的錨點(diǎn)組件的
<template>
<!-- 左邊菜單區(qū) -->
<a-anchor :affix="false" :get-current-anchor="getCurrentAnchor">
<!-- 一級錨點(diǎn) -->
<a-anchor-link href="#menu1" rel="external nofollow" title="菜單一">
<!-- 二級錨點(diǎn) -->
<a-anchor-link href="#menu2" rel="external nofollow" title="菜單二" />
</a-anchor-link>
</a-anchor>
<!-- 右邊內(nèi)容滾動區(qū) -->
<div id="menu1">菜單一的詳細(xì)內(nèi)容</div>
<div id="menu2">菜單二的詳細(xì)內(nèi)容</div>
</template>
<script>
export default {
methods: {
// 默認(rèn)高亮的錨點(diǎn)
getCurrentAnchor() {
return '#menu1';
},
},
};
</script>優(yōu)點(diǎn)：
1、已經(jīng)封裝好的，方便使用
缺點(diǎn)：
1、a-anchor組件，原理是類似：a標(biāo)簽的href屬性值（href=“#menu”）和內(nèi)容區(qū)域id屬性值（<div id=‘menu’>）一致，實(shí)現(xiàn)錨點(diǎn)定位，但是，同時(shí)瀏覽器URL地址會拼接#id，對于Vue開發(fā)的項(xiàng)目來說， 如果當(dāng)前頁面地址是 http://localhost:8080/#/since, 你點(diǎn)擊錨點(diǎn)：菜單一，路徑就會變成： http://localhost:8080/#/menu1， 此時(shí)刷新頁面頁面跳轉(zhuǎn)失敗，頁面內(nèi)容丟失
2、缺點(diǎn)二就是無法實(shí)現(xiàn) 需求二，無法滿足在其他頁面 打開該頁面，根據(jù)內(nèi)容id實(shí)現(xiàn)，內(nèi)容區(qū)域滾動
2、如果使用的是 Element UI， 該UI庫對于Vue2，來說是沒有錨點(diǎn)相關(guān)的組件的，所以需要借助第三方插件 vue-scrollto
1、 npm install --save vue-scrollto
2、 在需要使用錨點(diǎn)的組件中：
var VueScrollTo = require('vue-scrollto');
3、給錨點(diǎn)添加點(diǎn)擊事件
var options = {
container: '#container',
easing: 'ease-in',
lazy: false,
offset: -60,
force: true,
cancelable: true,
onStart: function(element) {
// scrolling started
},
onDone: function(element) {
// scrolling is done
},
onCancel: function() {
// scrolling has been interrupted
},
x: false,
y: true
}
VueScrollTo.scrollTo(element, duration, options)缺點(diǎn)：
親測無效，無法實(shí)現(xiàn)，點(diǎn)擊左邊菜單，右側(cè)內(nèi)容滾動
看了好多博主，有的需要在router.js路由文件處理，有的需要在組件實(shí)例中watch路由（router），好像都沒用
需求最終實(shí)現(xiàn)
利用scrollIntoView方法，同時(shí)實(shí)現(xiàn)需求一和需求二
1.實(shí)現(xiàn)需求一：點(diǎn)擊左菜單，實(shí)現(xiàn)右邊內(nèi)容區(qū)域滾動定位（監(jiān)聽路由）
// 1、在左菜單點(diǎn)擊事件中，實(shí)現(xiàn)如下代碼
點(diǎn)擊左菜單 當(dāng)前頁面路由拼接 search參數(shù)（菜單對應(yīng)的右邊內(nèi)容id）
// 2、在錨點(diǎn)頁面，監(jiān)聽路由變化
監(jiān)聽路由變化，獲取search參數(shù)，
// 3、設(shè)置document.body.scrollTop （document 和 this.$el 都可以）
document.body.scrollTop = this.$el.querySelector('#'+search參數(shù)).scrollIntoView()
// 最終代碼
watch: {
// 點(diǎn)擊左菜單路由可以監(jiān)聽到 但是點(diǎn)擊欄目預(yù)覽 需要走mounted()
$route(newRoute) {
if (!newRoute.query.programId) return;
// 點(diǎn)擊錨點(diǎn) 路由監(jiān)聽不到
// console.log(newRoute.params.programId,'newRoute.params.programId')
let id = "program" + this.$route.query.programId;
this.$nextTick(()=>{
if(this.$el.querySelector(`#${id}`)) {
// scrollIntoView 不能隨便添加參數(shù) 建議不要加任何參數(shù)
document.body.scrollTop = this.$el.querySelector(`#${id}`).scrollIntoView();
}
});
this.saveCurrentProgramId = newRoute.query.programId;
},
},2.管理頁，可以預(yù)覽該頁，并根據(jù)預(yù)覽內(nèi)容的id定位到滾動區(qū)域；（mounted()鉤子中實(shí)現(xiàn)）
// 1、在錨點(diǎn)頁面，mounted()鉤子中，獲取search參數(shù)id
this.$router.query.id
監(jiān)聽路由變化，獲取search參數(shù)，
// 2、設(shè)置document.body.scrollTop
// document 和 this.$el 都可以
document.body.scrollTop = this.$el.querySelector('#'+search參數(shù)).scrollIntoView()
// 最終代碼
mounted() {
let that = this;
// id選擇器不能以數(shù)字開頭 不能包含 / 等特殊字符
setTimeout(function() {
if(that.$route.query.programId) {
let id = "program" + that.$route.query.programId;
if(that.$el.querySelector(`#${id}`)) {
// scrollIntoView 不能隨便添加參數(shù) 建議不要加任何參數(shù)
document.body.scrollTop = that.$el.querySelector(`#${id}`).scrollIntoView();
}
}
},1000)
}注意：
- scrollIntoView()方法最好不要添加任何參數(shù)，加了參數(shù)有可能失效
- id選擇器千萬不能以數(shù)字開頭，且不能包括 \ 等特殊字符（我為了拼接原先頁面的路徑和id，將內(nèi)容區(qū)域id熟悉寫成：id=‘since/123’），此時(shí)會報(bào)錯(cuò)：選擇器無效
- this.$el后面不能使用getElementId類似方法，只能使用querySelector類似的方法
- 元素渲染時(shí)期問題，需要添加定時(shí)器和this.$nextTick(()=>())，來操作元素
- 核心代碼：document.body.scrollTop = this.$el.querySelector(‘#’+search參數(shù)).scrollIntoView()
缺點(diǎn)
在Vue項(xiàng)目中，使用了document對象，雖然需求實(shí)現(xiàn)了，但是并不是最好的。如果你們有較好的方法可以評論區(qū)回復(fù)
題外話：
有的博主寫的是：
document.body.scrollTop = this.$el.querySelector(selector).offsetTop
親測無效！
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇vue 監(jiān)聽屏幕高度的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue.js 的內(nèi)聯(lián)表達(dá)式非常方便，但它最合適的使用場景是簡單的布爾操作或字符串拼接。這篇文章給大家介紹了Vue.js教程之計(jì)算屬性，非常不錯(cuò)，感興趣的的朋友一起看看吧2016-11-11
使用el-upload組件實(shí)現(xiàn)遞歸多文件上傳的全過程
el-upload組件文件上傳都是每個(gè)文件請求一次接口,本次實(shí)現(xiàn)一次請求上傳多個(gè)文件,下面這篇文章主要給大家介紹了關(guān)于使用el-upload組件實(shí)現(xiàn)遞歸多文件上傳的相關(guān)資料,需要的朋友可以參考下2023-03-03
el-form錯(cuò)誤提示信息手動添加和取消的示例代碼
這篇文章主要介紹了el-form錯(cuò)誤提示信息手動添加和取消,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Nuxt頁面級緩存的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
在Vue3中為路由Query參數(shù)標(biāo)注類型的方法
這篇文章主要介紹了在Vue3中如何為路由Query參數(shù)標(biāo)注類型,我們就針對這個(gè)話題如何為路由Query參數(shù)標(biāo)注類型為例,看看Composable和IOC容器的代碼風(fēng)格究竟有什么不同,需要的朋友可以參考下2024-08-08
今天小編就為大家分享一篇基于element-ui的rules中正則表達(dá)式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue項(xiàng)目中實(shí)現(xiàn)緩存的最佳方案詳解
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中實(shí)現(xiàn)緩存的最佳方案，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
Vue判斷字符串(或數(shù)組)中是否包含某個(gè)元素的多種方法
在我們前端日常開發(fā)中經(jīng)常會遇到判斷一個(gè)字符串中是否包含某個(gè)元素的需求,下面這篇文章主要給大家介紹了關(guān)于Vue判斷字符串(或數(shù)組)中是否包含某個(gè)元素的多種方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
vue2.x中keep-alive源碼解析(實(shí)例代碼)
Keep-Alive模式避免頻繁創(chuàng)建、銷毀鏈接，允許多個(gè)請求和響應(yīng)使用同一個(gè)HTTP鏈接，這篇文章主要介紹了vue2.x中keep-alive源碼解析,需要的朋友可以參考下2023-02-02