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 相关文章推荐
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
JS弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 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
使用adodb lite解决问题
2006/12/31 PHP
支持中文的php加密解密类代码
2011/11/27 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
汽车维修专业个人求职信范文
2014/01/01 职场文书
公司司机岗位职责
2014/02/07 职场文书
亲属关系公证书
2014/04/08 职场文书
2014年设计师工作总结
2014/11/25 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
三好学生个人总结
2015/02/15 职场文书
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电