vue页面切换到滚动页面显示顶部的实例
更新时间：2018年03月13日 16:42:33 作者：演员赵诗绎
下面小编就为大家分享一篇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页面切换到滚动页面显示顶部的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了在Vue中通过vue-router实现命名视图,本文给大家提到了vue-router的原理解析，给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-04-04
这篇文章主要介绍了Vue+node实现音频录制播放,功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-03-03
这篇文章主要介绍了Vue结合路由配置递归实现菜单栏,本文通过实例代码给大家介绍的非常详细，对大家的学习火锅工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
今天通过本文给大家分享antd+vue实现动态验证循环属性表单的思路，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-09-09
在Vue3中使用环境变量的方式与Vue2基本相同,下面这篇文章主要给大家介绍了关于vue项目index.html中使用环境变量的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了element-ui自定义表格如何给input双向绑定数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
本文主要介绍了vue+jsplumb实现工作流程图的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要介绍了使用Vant框架list组件遇到的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue通过js动态修改元素的样式，如果是固定的几个样式，我常用的是绑定元素的calss,给不同的class写好需要的样式，js控制是否使用这个class2022-09-09
这篇文章主要介绍了vue.js 实现输入框动态添加功能，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
最新评论