Vue实现页面锚点至顶部

举报
SHQ5785 发表于 2023/09/04 09:09:58 2023/09/04
【摘要】 一、应用场景在vue项目开发时,发现路由跳转之后,页面默认停留在当前浏览的位置,但是很多时候我们想要的是路由跳转之后,页面重新定位到顶部,下面介绍一下可以实现的方法。 二、方式一在main.js 中添加代码:router.afterEach((to, from, next) => { window.scrollTo(0, 0)}) 三、方式二如果需要某个页面跳转回顶部,仅需要在当前页面(...

一、应用场景

vue项目开发时,发现路由跳转之后,页面默认停留在当前浏览的位置,但是很多时候我们想要的是路由跳转之后,页面重新定位到顶部,下面介绍一下可以实现的方法。

二、方式一

main.js 中添加代码:

router.afterEach((to, from, next) => {
  window.scrollTo(0, 0)
})

三、方式二

如果需要某个页面跳转回顶部,仅需要在当前页面(page)合适的位置加入一下代码即可:

// chrome
document.body.scrollTop = 0
// firefox
document.documentElement.scrollTop = 0
// safari
window.pageYOffset = 0

四、方式三

在路由index.js中,加入以下代码也可实现路由改变定位到顶部的效果,savedPosition当且仅当通过浏览器的前进/后退按钮触发时才可用,代码如下:

scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
        return savedPosition
    }
    return {
        x: 0,
        y: 0
    }
}

应用以上方法,会发现每次打开页面都是显示的是页面顶部内容,再也不会显示页面底部或者其他位置影响用户体验。

五、延伸阅读

Vue项目中,使用ElementUI渲染表格数据时,如果某一个列数值长度超过列宽,会默认换行,造成显示不友好。

翻阅ElementUI文档,可发现show-overflow-tooltip列属性可实现列内容过长被隐藏时显示tooltip的功能。

注:show-overflow-tooltip属性需要谨慎使用,如果一个页面多列使用,会影响页面加载速度。因为show-overflow-tooltip 属性虽然可以解决文本超长时的问题,但当前是在所有的单元格中插入 tooltip 组件包装来简单实现的。

tooltip 组件使得 DOM 结构成倍增加,而且每个 tooltip 内部都有至少两个监听事件。这对大数据量表格来说性能是致命的。所以在中后台系统中大量数据的表格展示需要优化改进。

<el-table-column
          :show-overflow-tooltip="true"
          prop="EMAIL"
          label="电子邮件"
        >
</el-table-column>
【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。