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


Posted in Javascript onMarch 13, 2018

在用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页面切换到滚动页面显示顶部的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中常见陷阱小结
Apr 27 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
BootStrap模态框不垂直居中的解决方法
Oct 19 Javascript
JavaScript时间日期操作实例小结【5个示例】
Dec 22 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
ES6函数实现排它两种写法解析
May 13 Javascript
JavaScript, select标签元素左右移动功能实现
May 14 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 #Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 #Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 #Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 #Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 #Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 #Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 #Javascript
You might like
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
PHP 字符串 小常识
2009/06/05 PHP
php面向对象全攻略 (七) 继承性
2009/09/30 PHP
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
python中使用mysql数据库详细介绍
2015/03/27 Python
进一步探究Python的装饰器的运用
2015/05/05 Python
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
Django中Middleware中的函数详解
2019/07/18 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
大门门卫岗位职责
2013/11/30 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
赡养老人协议书范本
2015/08/06 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
详解Python生成器和基于生成器的协程
2021/06/03 Python