Vue 实现页面内锚点定位
本文介绍2种方法一、利用a链接实现锚点定位这种跳转方法实现的是从某个位置跳转到同页面的另一个位置。为什么会用到这个呢?因为我的页面上有3张表,数据量有点大,如果不滑动页面的话,没法展示完。也就是用户可能看不到下面的表,或者觉得滑动太麻烦了,懒得滑动了。于是我在左边添加了个侧边栏,说明我这个页面有3张表,点击侧边栏选项跳转到对应的页面位置。侧边栏这么写在目标位置(也就是三个表的div)写入一个空的a
本文介绍2种方法
一、利用a链接实现锚点定位
这种跳转方法实现的是从某个位置跳转到同页面的另一个位置。为什么会用到这个呢?因为我的页面上有3张表,数据量有点大,如果不滑动页面的话,没法展示完。也就是用户可能看不到下面的表,或者觉得滑动太麻烦了,懒得滑动了。于是我在左边添加了个侧边栏,说明我这个页面有3张表,点击侧边栏选项跳转到对应的页面位置。
侧边栏这么写
在目标位置(也就是三个表的div)写入一个空的a标签,设置一个name属性,name属性设置必须唯一。这里可以是vital,tumor,cancer。就可以实现页面内跳转了。
但是这么写有个bug. 就是每次点击侧边栏锚点定位表格的时候,url 也会对应的变化。也就是会从localhost:port/browser/#vital 变化到 localhost:port/browser/#tumor .然后vue监听到变化,会重新请求数据,加载数据。 也就是我的想法是 进入页面时加载数据,在跳转表格时不加载数据,但是现在变成了进入页面 ,跳转表格的时候都加载数据。
所以这种方法跳转表格就不行了
下面介绍方法2,恰好解决了问题。
二、document.querySelector(“要返回地方的id”).scrollIntoView(true);
这种方法,url不变化。
侧边栏如下:
表格 div 中加个id属性
然后在methods里面添加个函数
goAnchor (selector) {
document.querySelector(selector).scrollIntoView({
behavior:"smooth"
})
}
总结就是这样的:
<a @click="goAnchor('#anchor14')">点击这里跳转</a>
methods: {
//模拟锚点跳转
goAnchor(selector) {//参数selector是id选择器(#anchor14)
document.querySelector(selector).scrollIntoView({
behavior: "smooth"
});
},
}
更多推荐
所有评论(0)