vue页面切换到滚动页面显示顶部的实例_vue.js

下面我就为大家分享一篇vue页面切换到滚动页面显示顶部的实例,具有很好的参考价值,希望对大家有所帮助。

在用mint ui写移动端从’listview’跳转到详情页时,详情页面由于大于手机高度可以滚动,当点击’listview’滚动list进入详情页面时发现详情页面不是从顶部开始显示。

一、目标:

‘listview’进入详情页面时详情页面从页面顶部开始显示。

二、让首先查了下两个页面的scrollY,每次都是不一样的,也没有发现listview与详情页面之间的scrollY之间的规律

立即学习“前端免费学习笔记(深入)”;

三、解决思路:进入详情页面的时候固定滚动页面的位置在顶部

四、代码实现:vue里面写法如下,至于updated生命周期里面

updated() {     window.scroll(0, 0);   }

登录后复制

五、问题已经解决,但是网络慢的时候可以清晰的看到页面底部滚动到顶部的过程不是很美观,这个问题可以自己加上网络加载数据时候的蒙版和loading,我是加了

六、在分享个关于vue从登陆页面进入主页面的拦截器的写法

(1) 在login.vue登陆成功的时候存入sessionStorage

sessionStorage.setItem('isLogin', true)

登录后复制

(2) 在Router的index.js里面写入

router.beforeEach((to, from, next) => {//  '/'是登陆页面的路由 if (to.path == '/') {  sessionStorage.removeItem('isLogin'); } let user = JSON.parse(sessionStorage.getItem('isLogin')); if (!user && to.path != '/') {  next({ path: '/' }) } else {  next() }})

登录后复制

即可完成拦截器!

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

解决vue页面DOM操作不生效的问题

nodejs实现超简单生成二维码的方法

nodejs+mongodb aggregate级联查询操作示例

以上就是vue页面切换到滚动页面显示顶部的实例_vue.js的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2753485.html

(0)
上一篇 2025年3月8日 06:38:14
下一篇 2025年3月8日 06:38:21

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 聊聊JS动画库 Velocity.js的使用

    本篇文章主要介绍了聊聊js动画库 velocity.js的使用,现在分享给大家,也给大家做个参考。 前言 又到了炎热的7月,很久没有更新技术文章了,原因是上月月底实习结束,从公司离职。然后最近在弄自己的项目和考驾照,为了下次公司的应聘做准备…

    编程技术 2025年3月8日
    200
  • JS实现的集合去重,交集,并集,差集功能示例

    这篇文章主要介绍了js实现的集合去重,交集,并集,差集功能,结合实例形式分析了javascript基于数组实现的集合去重、交集、并集、差集等相关实现技巧,需要的朋友可以参考下 本文实例讲述了JS实现的集合去重,交集,并集,差集功能。分享给大…

    编程技术 2025年3月8日
    200
  • 基于vue.js实现的分页

    本文主要给大家介绍基于vue的分页原生写法,代码分为html部分和js部分,简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧 本文主要介绍基于vue的分页原生写法。 先po上效果图: html部分,将page作为一个单独的组件 上一…

    2025年3月8日
    200
  • vue加载自定义的js文件方法

    下面小编就为大家分享一篇vue加载自定义的js文件方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 在做项目中需要自定义弹出框。就自己写了一个。 效果图 遇见的问题 怎么加载自定义的js文件 立即学习“前端免费学习笔记(…

    2025年3月8日
    200
  • webpack打包js的方法

    这篇文章主要介绍了webpack打包js的方法,现在分享给大家,也给大家做个参考。 Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。 在代码实践之前,先说一写…

    2025年3月8日
    200
  • AngularJS对动态增加的DOM实现ng-keyup事件示例

    这篇文章主要介绍了angularjs对动态增加的dom实现ng-keyup事件示例,现在分享给大家,也给大家做个参考。 我们经常在网页中看到这种形式的内容,如图: 用鼠标点击一下,就变成了一个input,如图: 如果未输入内容,并且鼠标离开…

    2025年3月8日 编程技术
    200
  • JS常用算法累加、迭代、穷举、递归实现(附代码)

    这次给大家带来JS常用算法累加、迭代、穷举、递归实现(附代码),JS常用算法累加、迭代、穷举、递归的注意事项有哪些,下面就是实战案例,一起来看一下。 累加和累积 累加:将一系列的数据加到一个变量里面。最后的得到累加的结果 比如:将1到100…

    编程技术 2025年3月8日
    200
  • 怎样使用JS实现计算圆周率到小数点后100位

    这次给大家带来怎样使用JS实现计算圆周率到小数点后100位,使用JS实现计算圆周率到小数点后100位的注意事项有哪些,下面就是实战案例,一起来看一下。 浮点数的有效数位是16位,我自己做了一个大数类,能存储100位有效数位,并实现了大数类的…

    编程技术 2025年3月8日
    200
  • 如何使用Vue.js实现微信公众号菜单编辑器(思路详解)

    这次给大家带来如何使用Vue.js实现微信公众号菜单编辑器(思路详解),使用Vue.js实现微信公众号菜单编辑器的注意事项有哪些,下面就是实战案例,一起来看一下。 学习一段时间Vue.js,于是想尝试着做一个像微信平台里那样的菜单编辑器,在…

    2025年3月8日
    200
  • 如何使用Vue.js实现微信公众号菜单编辑器(案例代码)

    这次给大家带来如何使用Vue.js实现微信公众号菜单编辑器(案例代码),使用Vue.js实现微信公众号菜单编辑器的注意事项有哪些,下面就是实战案例,一起来看一下。 实现菜单删除方法 在vue实例中添加删除菜单方法,根据选中的菜单级别和索引来…

    2025年3月8日
    200

发表回复

登录后才能评论