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页面切换到滚动页面显示顶部的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了uni-app在线预览pdf文件的相关资料,本文主要介绍了如何在Vue项目中使用PDF.js插件进行PDF文件的预览,包括插件的下载、版本兼容问题的处理,以及在static文件夹下新建pdf文件夹存放解压文件,需要的朋友可以参考下2024-10-10
vue中提示$index is not defined错误的解决方式
这篇文章主要介绍了vue中提示$index is not defined错误的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
本文详细介绍了Vue中nextTick的原理和使用方法,Vue采用异步渲染机制,通过nextTick可以确保在DOM更新后执行回调,nextTick依赖微任务和宏任务,优先使用Promise,降级到MutationObserver/setTimeout,Vue3进一步优化了nextTick,减少了复杂度并提升了性能2025-02-02
Vue引入路径正确但一直报错问题:Already included file name&n
这篇文章主要介绍了Vue引入路径正确但一直报错:Already included file name ‘××ב differs from file name ‘××ב only in casing.具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要介绍了vue项目依赖检查depcheck问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
defineModel 是一个新的 <script setup> 宏,旨在简化支持 v-model 的组件的实现, 这个宏用来声明一个双向绑定 prop,下面我们就来看看他的具体使用吧2024-03-03
对于vue来说，组件之间的消息传递是非常重要的，用vue可以是要组件复用的，而组件实例的作用域是相互独立，这意味着不同组件之间的数据无法互相引用，一般来说，组件之间可以有几种关系，下面是我对组件之间消息传递的常用方式的总结2022-08-08
这篇文章主要为大家详细介绍了vue滚动tab跟随切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了基于vue实现8小时带刻度的时间轴根据当前时间实时定位功能,开始时间、结束时间可配置，根据当前时间初始化位置，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-05-05
下面小编就为大家分享一篇vue.js项目打包上线的图文教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-11-11
最新评论