vue滚动行为
有人问道如何记录vue页面的滚动条位置,再次载入组件的时候页面滚动到记录的位置?
思路:
记录滚动条位置我们好记
我们要在组件销毁之前也就是页面跳转的时候 需要用到生命周期beforeDistory将位置记录下来
你可以存到vue中 那么如果我们用了keep-alive怎么办 他不会销毁组件啊 ?
那么我们就用到keep-alive的生命周期 的deactivated钩子中将位置记录下来
等到再次回到页面的时候 就需要等到 组件完全加载完毕 再设置滚动条的位置
这里我们用到vm.$nextTick()这个方法 来检测组件载入完毕
用到vue提供的方法scrollBehavior
scrollBehavior (to, from, savedPosition) {
//如果有存入的位置就会滚到该位置,否者返回到页面顶部
if (savedPosition) {
return savedPosition
} else {
if (to.hash) {
return {selector: to.hash}
}
}
},
原文地址:https://segmentfault.com/a/1190000012494872
vue滚动行为的更多相关文章
- 笔记-VUE滚动加载更多数据
来源:https://blog.csdn.net/qq_17281881/article/details/87342403 VUE滚动加载更多数据 data() { return { loading: ...
- VUE 滚动插件(better-scroll)
1. 概述 1.1 说明 better-scroll是一款重点解决移动端(已支持PC)各种滚动场景需求的插件.例如淘宝聚划算中的类型选择(女装/家纺/生鲜美食等),没有滚动条显示却实现了滚动功能. 1 ...
- vue滚动行为控制——页面跳转返回上一个页面保留滚动位置
需求分析: 一般这个功能在后台管理系统用的比较多,因为后台页面都是在当前页面打开,对于某些列表筛选页,如果列表数据比较多,页面就会滚动.当页面发生滚动,对列表数据进行查看或者编辑的时候,跳转到下一级页 ...
- Vue滚动加载自定义指令
用Vue在移动端做滚动加载,使用mint-ui框架, InfiniteScroll指令loadmore组件,在uc浏览器和qq浏览器都无法触发.无奈我只能自己写了. 决定用vue 的自定义指令 写滚动 ...
- vue滚动+滑动删除标记(移动端)仿qq/微信
安装组件 "vue-touch": "^2.0.0-beta.4", main.js引入 import VueTouch from 'vue-touch' Vu ...
- [vue ]滚动视图解决ElementUI NavMenu 导航菜单过长显示的问题
记录一下工作 需求 导航菜单过长的时候会溢出,需要一个像 Tabs 标签页一样的滚动视图容器,可以左右滚动内部视图. 解决方法 由于时间问题,所以直接将 Tabs 源码抽取出来使用. 这里要做一些特殊 ...
- pc端vue 滚动到底部翻页
html: <div class="list" ref="scrollTopList"> <div class="listsmall ...
- vue滚动分页加载以及监听事件处理
<template> <div class="bodyContainer"> <div class="allContent" id ...
- vue 滚动公告
<!-- 滚动公告 --> <div class="textArr"> <p class="slice-enter-active" ...
随机推荐
- Photoshop CC (2015.2) 2016.1 版
1.设计空间(预览版)增强 Design Space (Preview) 2.画板 3.Surface Pro触屏优化(多种手势) 4.自定义工具栏和工作区 5.字体收藏夹(要死掉一批扩展) 6.库( ...
- inkscape
最近的论文需要把latex公式放到图里,于是想起了装了之后一直没怎么用的inkscape.因为visio貌似没法直接贴latex格式的公式. 找了几个用法: http://blog.sciencene ...
- 005.JMS可靠性机制
1. 消息接收确认 JMS消息只有在被确认之后,才认为已经被成功地消费了.消息的成功消费通常包含三个阶段: 客户接收消息 客户处理消息 消息被确认 在事务性会话中,当一个事务被提交的时候,确认自动发生 ...
- EL与JSTL学习(一)EL技术
1.EL 表达式概述 EL(Express Lanuage)表达式可以嵌入在jsp页面内部,减少jsp脚本的编写,EL出现的目的是要替代jsp页面中脚本的编写. 2.EL从域中取出数据(EL最重要的作 ...
- STM8S103之时钟设置
最大时钟(指的是system clock):外部晶振24MHz,内部高速RC16MHz 三个时钟源:外部晶振.内部高速RC(上电默认) +内部低速RC 几个时钟:master clock(即sytem ...
- XML文件基础,DTD校验文件编写,Schema文件的简单使用
dtd <!-- <!ELEMENT 元素(子元素,...)> --> <!ELEMENT students (student+,cat*) > <!ELEM ...
- .Net基础杂记
1.面向对象程序思想 面向对象是程序开发的一种机制,特征为封装.继承.多态.以面向对象方式编写程序时,将复杂的项目抽象为多个对象互相协作的模型,然后编写模型结构,声明或实现类型的成员,即描述对象的特征 ...
- POJ-3436 ACM Computer Factory 最大流 为何拆点
题目链接:https://cn.vjudge.net/problem/POJ-3436 题意 懒得翻,找了个题意. 流水线上有N台机器装电脑,电脑有P个部件,每台机器有三个参数,产量,输入规格,输出规 ...
- luogu P3414 SAC#1 - 组合数(组合数学)
题意 求sigma(C(n,i))其中C是组合数(即C(n,i)表示n个物品无顺序选取i个的方案数),i取从0到n所有偶数. 由于答案可能很大,请输出答案对6662333的余数. (n<=101 ...
- AWS中国EC2 公网IP登录免pemKEY修改shh 配置文件
个人使用记录 1:KEY 授权 chmod 400 VPN.pem 2:连接 ssh -i "VPN.pem" ubuntu@ec2-54-183-119-93.us-west-1 ...