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实现页面打印的三种方法
Mar 05 Javascript
javascript语句中的CDATA标签的意义
May 09 Javascript
JavaScript 撑出页面文字换行
Jun 15 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
Dec 14 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
JavaScript瀑布流布局实现代码
May 06 Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 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中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
php随机显示图片的简单示例
2014/02/15 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
php单例模式示例分享
2015/02/12 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
javascript优先加载笔记代码
2008/09/30 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
7个JS基础知识总结
2014/03/05 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
Angular工具方法学习
2016/12/26 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
python打印异常信息的两种实现方式
2019/12/24 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
Python中if有多个条件处理方法
2020/02/26 Python
Python Json数据文件操作原理解析
2020/05/09 Python
英国家电直销:Appliances Direct
2016/09/22 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
酒店管理自荐信
2013/10/23 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
活着观后感
2015/06/03 职场文书