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" ...
随机推荐
- Chrome浏览器查看SSL证书信息
1.https使用f12打开,选中security 如果F12打不开,可以通过最右端的自定义及控制chrome菜单,打开"更多工具"-->"开发者工具" ...
- 使用python进行分页操作
class getPage: """通过这个类 获取 开始和结束点""" def __init__(self,page): try: sel ...
- ASM磁盘组中的AU与条带
一.AU与条带(AU和条带就是一个分配单位,数据会被以一定单位分割,存储在多个磁盘中.分割单位的大小由AU.条带来决定. ASM有两种条带: 1.不可调粗粒度: 相当于ASM没有条带,或者说AU就是条 ...
- css part 2
CSS 盒子模型 margin: 用于控制元素与元素之间的距离:margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的. padding: ...
- select选中值,传this
<select onChange = "a(this)"></select> function a(obj){ $(obj).find("opti ...
- 1113: [视频]树形动态规划(TreeDP)8:树(tree)(树形dp状态设计总结)
根据最近做的几道树形dp题总结一下规律.(从这篇往前到洛谷 P1352 ) 这几道题都是在一颗树上,然后要让整棵树的节点或边 满足一种状态.然后点可以影响到相邻点的这种状态 然后求最小次数 那么要从两 ...
- docker安装MySQL8,目录挂载、配置用户名密码、忽略表名大小写、连接数、特殊字符、时区
原文:docker安装MySQL8,目录挂载.配置用户名密码.忽略表名大小写.连接数.特殊字符.时区 一.环境配置 1.系统:centos7.3 2.docker版本:Docker version 1 ...
- 洛谷 P2665 [USACO08FEB]连线游戏Game of Lines
P2665 [USACO08FEB]连线游戏Game of Lines 题目背景 Farmer John最近发明了一个游戏,来考验自命不凡的贝茜. 题目描述 Farmer John has chall ...
- [LeetCode]Median of Two Sorted Arrays 二分查找两个有序数组的第k数(中位数)
二分.情况讨论 因为数组有序,所以能够考虑用二分.通过二分剔除掉肯定不是第k位数的区间.如果数组A和B当前处理的下标各自是mid1和mid2.则 1.假设A[mid1]<B[mid2], ①.若 ...
- Invalid project description.
1.错误描写叙述 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/ ...