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" ...
随机推荐
- HTTP的请求及响应
前言 本文主要包括以下内容: HTTP是什么? HTTP 请求包括哪些部分? HTTP 响应包括哪些部分? 如何用Chrome开发者工具查看 HTTP 请求及请求的内容? 如何使用 curl 命令? ...
- word2tex之类的问题
首先就是这个word2tex一般是在word和tex文本互相转换的时候用的. 以前win7下用的chikrii忘了使用方法.. 之后再win10下用的excel2tex,但是转换时候总感觉不如word ...
- ASP.NET 让ajax请求webform后台方法
$.ajax({ type: "POST", url: ".aspx/getSubjectDirection", data: JSON.stringify({ ...
- String Comparison(C#)
When comparing programmatic strings, you should always use StringComparison.Ordinal or StringCompari ...
- XShell与虚拟机连接的IP问题
这几天在Xshell连接虚拟机这个问题上头疼了好长时间,原因是我在虚拟机内的eth0网卡没有分配IP地址,从而导致无法连接XShell,今天解决了这个问题,做一下记录. 首先我使用的是微软的Hyper ...
- SpringBoot学习笔记(16)----SpringBoot整合Swagger2
Swagger 是一个规范和完整的框架,用于生成,描述,调用和可视化RESTful风格的web服务 http://swagger.io Springfox的前身是swagger-springmvc,是 ...
- 计算a-b的差[返回BigDecimal 类型]
/*** * 返回 a-b 的差 [返回 BigDecimal 类型] * @param a 被减数 * @param b 减数 * @return */ public static BigDecim ...
- 超简单入门Vuex小示例
写在前面 本文旨在通过一个简单的例子,练习vuex的几个常用方法,使初学者以最快的速度跑起来一个vue + vuex的示例. 学习vuex需要你知道vue的一些基础知识和用法.相信点开本文的同学都具备 ...
- Redis学习总结(3)——Redis整合Spring结合使用缓存实例
摘要:本文介绍了如何在Spring中配置redis,并通过Spring中AOP的思想,将缓存的方法切入到有需要进入缓存的类或方法前面. 一.Redis介绍 什么是Redis? redis是一个key- ...
- C++根据扩展名获取文件图标、类型
简述 在Windows系统中,根据扩展名来区分文件类型,比如:.txt(文本文件)..exe(可执行程序).*.zip(压缩文件),下面,我们来根据扩展名来获取对应的文件图标.类型. 简述 源码 源码 ...