vue實現跨頁面定位錨點區(qū)域方式
實際企業(yè)項目開發(fā)中,如何基于Vue2,利用錨點實現元素區(qū)域滾動定位
項目需求
- 點擊左菜單,實現右邊內容區(qū)域滾動定位;
- 管理頁,可以預覽該頁,并根據預覽內容的id定位到滾動區(qū)域;
需求分析并實現
需求一
點擊左菜單,實現右邊內容區(qū)域滾動定位
1、如果你使用的是ant-design Vue UI庫,是可以使用自帶的錨點組件的
<template>
<!-- 左邊菜單區(qū) -->
<a-anchor :affix="false" :get-current-anchor="getCurrentAnchor">
<!-- 一級錨點 -->
<a-anchor-link href="#menu1" rel="external nofollow" title="菜單一">
<!-- 二級錨點 -->
<a-anchor-link href="#menu2" rel="external nofollow" title="菜單二" />
</a-anchor-link>
</a-anchor>
<!-- 右邊內容滾動區(qū) -->
<div id="menu1">菜單一的詳細內容</div>
<div id="menu2">菜單二的詳細內容</div>
</template>
<script>
export default {
methods: {
// 默認高亮的錨點
getCurrentAnchor() {
return '#menu1';
},
},
};
</script>優(yōu)點:
1、已經封裝好的,方便使用
缺點:
1、a-anchor組件,原理是類似:a標簽的href屬性值(href=“#menu”)和內容區(qū)域id屬性值(<div id=‘menu’>)一致,實現錨點定位,但是,同時瀏覽器URL地址會拼接#id,對于Vue開發(fā)的項目來說, 如果當前頁面地址是 http://localhost:8080/#/since, 你點擊錨點:菜單一,路徑就會變成: http://localhost:8080/#/menu1, 此時刷新頁面頁面跳轉失敗,頁面內容丟失
2、缺點二就是無法實現 需求二,無法滿足在其他頁面 打開該頁面,根據內容id實現,內容區(qū)域滾動
2、如果使用的是 Element UI, 該UI庫對于Vue2,來說是沒有錨點相關的組件的,所以需要借助第三方插件 vue-scrollto
1、 npm install --save vue-scrollto
2、 在需要使用錨點的組件中:
var VueScrollTo = require('vue-scrollto');
3、給錨點添加點擊事件
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)缺點:
親測無效,無法實現,點擊左邊菜單,右側內容滾動
看了好多博主,有的需要在router.js路由文件處理,有的需要在組件實例中watch路由(router),好像都沒用
需求最終實現
利用scrollIntoView方法,同時實現需求一和需求二
1.實現需求一:點擊左菜單,實現右邊內容區(qū)域滾動定位(監(jiān)聽路由)
// 1、在左菜單點擊事件中,實現如下代碼
點擊左菜單 當前頁面路由拼接 search參數(菜單對應的右邊內容id)
// 2、在錨點頁面,監(jiān)聽路由變化
監(jiān)聽路由變化,獲取search參數,
// 3、設置document.body.scrollTop (document 和 this.$el 都可以)
document.body.scrollTop = this.$el.querySelector('#'+search參數).scrollIntoView()
// 最終代碼
watch: {
// 點擊左菜單路由可以監(jiān)聽到 但是點擊欄目預覽 需要走mounted()
$route(newRoute) {
if (!newRoute.query.programId) return;
// 點擊錨點 路由監(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 不能隨便添加參數 建議不要加任何參數
document.body.scrollTop = this.$el.querySelector(`#${id}`).scrollIntoView();
}
});
this.saveCurrentProgramId = newRoute.query.programId;
},
},2.管理頁,可以預覽該頁,并根據預覽內容的id定位到滾動區(qū)域;(mounted()鉤子中實現)
// 1、在錨點頁面,mounted()鉤子中,獲取search參數id
this.$router.query.id
監(jiān)聽路由變化,獲取search參數,
// 2、設置document.body.scrollTop
// document 和 this.$el 都可以
document.body.scrollTop = this.$el.querySelector('#'+search參數).scrollIntoView()
// 最終代碼
mounted() {
let that = this;
// id選擇器不能以數字開頭 不能包含 / 等特殊字符
setTimeout(function() {
if(that.$route.query.programId) {
let id = "program" + that.$route.query.programId;
if(that.$el.querySelector(`#${id}`)) {
// scrollIntoView 不能隨便添加參數 建議不要加任何參數
document.body.scrollTop = that.$el.querySelector(`#${id}`).scrollIntoView();
}
}
},1000)
}注意:
- scrollIntoView()方法最好不要添加任何參數,加了參數有可能失效
- id選擇器千萬不能以數字開頭,且不能包括 \ 等特殊字符(我為了拼接原先頁面的路徑和id,將內容區(qū)域id熟悉寫成:id=‘since/123’),此時會報錯:選擇器無效
- this.$el后面不能使用getElementId類似方法,只能使用querySelector類似的方法
- 元素渲染時期問題,需要添加定時器和this.$nextTick(()=>()),來操作元素
- 核心代碼:document.body.scrollTop = this.$el.querySelector(‘#’+search參數).scrollIntoView()
缺點
在Vue項目中,使用了document對象,雖然需求實現了,但是并不是最好的。如果你們有較好的方法可以評論區(qū)回復
題外話:
有的博主寫的是:
document.body.scrollTop = this.$el.querySelector(selector).offsetTop
親測無效!
總結
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

