vue2 keepalive 保存滚动条位置

2024-11-09

vue-使用keepAlive对上下拉刷新列表数据和滚动位置细节进行处理

[前言] 使用vue处理项目中遇到列表页面时,有一些细节需要注意,这里总结一下,以便优化以后的代码.如下: 1. 使用mint-ui中的LoadMore组件上下拉刷新时,有时无法触发上拉加载更多的方法.还有ios上滚动不太流畅. 2. 从列表进入详情(列表数据分页请求的),再返回时,列表页需要记住之前的滚动位置,记住它上次的数据,但从其他页面进入列表页时,需要它重新刷新.(ps: 好像后面的vue版本对keepAlive页面滚动条会自动记录并处理) [需要实现效果] 本demo将实现如下效果.

WebStorage记录滚动条位置

因关注公众号<HTML5学堂>看到这篇文章 "利用本地存储,记录滚动条的位置" ,便好奇敲来试试,然后又看了一些关于WebStorage的资料附上这篇文章的地址 https://mp.weixin.qq.com/s/z34GRUZvDU2hCbH6Kc_ZDA 与大家共勉. 在网上搜了一些记录滚动条位置的文章,大多是用cookie来记录,下边我就自己看到的资料与大家分析cookie与webstorage的区别. 优点缺点应用场景 Cookie 简单易用安全性差,

解决ASP.NET回传后div滚动条位置复位的问题

中心思想:用一个隐藏控件保存当前scorll值.回传回来后根据scrollTop的值,然后在Page_Load中重新设置scrollTop. 首先是为DIV添加一个 onscroll="javascript:setScollTop()" 的方法(当然不一定是DIV其他的标签思路应该也是这样的) <div style="overflow: auto; height: 152px" align="left" id="dvScoll_1

js设置滚动条位置

JS控制滚动条的位置: window.scrollTo(x,y); 竖向滚动条置顶(window.scrollTo(0,0); 竖向滚动条置底 window.scrollTo(0,document.body.scrollHeight); JS控制TextArea滚动条自动滚动到最下部 document.getElementById('textarea').scrollTop = document.getElementById('textarea').scrollHeight; iframe中操作

一个适用于单页应用，返回原始滚动条位置的demo

如题,最近做一个项目时,由于页面太长,跳转后在返回又回到初始位置,不利于用户体验,需要每次返回到用户离开该页面是的位置.由于是移动端项目,使用了移动端的套ui框架framework7,本身框架的机制是支持返回原始位置的,但是由于涉及到权限及安全等方面的问题,没有采用framework7的路由机制,所以这个就必须自己写了. 我的想法是给每个页面一个data-page属性用于保存这个页面的名字,然后每次在页面卸载即离开的时候获取滚动条的位置,然后将页面的名称做为属性名保存起来,让后将其push到一个

sharepoint 2010 页面刷新时滚动条位置保持不变 Controlling scrollbar position on postback

sharepoint 2010 页面刷新时滚动条位置保持不变 Controlling scrollbar position on postback在sharepoint 2010中,如果当前页面的篇幅比较长,如何在拉动页面滚动条时,在刷新的条件下,保持滚动条位置,研究了一下,发现sharepoint 2010的母板页,和普通的asp.net页面有不太一样的地方,是通过一个属性document.getElementById("s4-workspace").scrollTop来控制的,以下

用 Javascript 获取页面大小、窗口大小和滚动条位置

页面大小.窗口大小和滚动条位置这三个数值在不同的浏览器例如 Firefox 和 IE 中有着不同的实现.即使在同一种浏览器例如 IE 中,不同版本也有不同的实现. 本文给出两个能兼容目前所有浏览器的 Javascript 函数,能够获得这三个数值. 获取页面大小和窗口大小的 Javascript 函数函数 GetPageSize 能够获得页面大小和窗口大小.执行这个函数会得到一个包含页面宽度.页面高度.窗口宽度.窗口高度的对象. 这个函数还是很容易读懂的. 第一部分是获得页面的实际大小,通过一

cookie记录横向滚动条位置

一.Css <style type="text/css"> #x{ width: 100%; white-space: nowrap; overflow-x: scroll; overflow-y: hidden; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; -webkit-overflow-scrolling: touch; text-align: justify; box-sizing:

JavaScript实现页面刷新滚动条位置不变（利用cookie）

实验环境:vs2015 asp.net(C#) 主要原理: 1.在页面滚动时或点击按钮时将当前滚动条位置记录到cookie[pos], 2.页面刷新或重载时查询cookie[pos]中的值是否存在,若存在根据该值给滚动条定位 .aspx文件 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

原生js--兼容获取窗口滚动条位置和窗口大小的方法

各个浏览器对获取获取窗口滚动条位置和窗口大小没有提供统一的API,以下是对其封装,解决兼容性问题 /** * 获取浏览器视口的大小(显示文档的部分) * */function getViewPortSize(){ // 除IE8及更早的版本以外的浏览器 if( window.innerWidth != null ){ return { w : window.innerWidth, h : window.innerHeight

asp.net页面刷新或者回发后DIV的滚动条位置不变！（转）

源文件:http://www.cnblogs.com/nyth/archive/2011/06/10/2077868.html 当把数据放在div里面,然后给div设置Scroll显示,在页面刷新后或者是处理了某个按钮的事件,这个时候div的滚动轴就会又回到起始位置,但事实上得把数据还记录到刷新前的位置! 经过思考,以及网上查询信息,得到解决办法: Js部分: <script type="text/javascript"> //刷新时滚动条保留位置 function Scr

表格头部与左侧内容随滚动条位置改变而改变（基于jQuery）

效果图如下: HTML代码: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co

jquery获取元素在文档中的位置信息以及滚动条位置（转）

jquery获取元素在文档中的位置信息以及滚动条位置 http://blog.csdn.net/qq_34095777/article/details/78750886 原文链接原创 2017年12月08日 21:38:50 标签: jquery / 元素位置 / DOM文档 / 视口 57 获取元素在页面中的位置信息,包括页面的可是区域还有页面滚动条的位置. 元素的位置信息包括: 元素的大小 width和height 元素的 X轴距离和 Y轴距离 jQeury提供的方法有: off

sessionStorage缓存滚动条位置

想象在一个列表页,用户上滑页面浏览数据,点击某一条进入详情页,之后再从详情页返回列表页时不会想再从头去查看数据,这就要求我们记录用户刚刚浏览的位置,而不是重新刷新页面到了页面顶部.这里需要用到sessionStorage,代码如下: $(window).scroll(function(){ if($(document).scrollTop()!=0){ sessionStorage.setItem("offsetTop", $(window).scrollTop());//保存滚动位置

Where does Oracle SQL Developer store connections? oracle SQL Developer 连接信息保存的位置，什么地方

oracle SQL Developer 连接信息保存的位置,在什么地方? 在切换登录用户后,oracle SQL Developer 连接信息不见了.只要以前的用户信息还存在,可以在路径 C:\Users\用户名\AppData\Roaming\SQL Developer\system2.1.1.64.45\o.jdeveloper.db.connection.11.1.1.2.36.55.30找到连接信息. 参考信息 http://stackoverflow.com/questions/79

【JQuery插件】元素根据滚动条位置自定义吸顶效果

;(function($){ $.fn.extend({ /* 元素根据滚动条位置自定义吸顶插件 @defaultTop 初始化top位置 @startTop 开始滚动和回复原样的位置 @demo var ensureTop = $('#ensure').offset().top; $('#columnFloat').setScroll({ defaultTop: ensureTop,//需要设置的默认起始top位置 startTop: ensureTop//从什么位置开始执行事件 }); */

原生JS滚动条位置处理

// 滚动条位置 var scrollPosition = { // 位置 result: 0, // 监听位置 rememberPosition: function () { var type = 'scroll' var handle = function () { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop scrollPosition

js--获取滚动条位置，并实现页面滑动到锚点位置

前言这篇来记录下最近工作中遇到的一个问题,在app原生和前端h5混合开发的过程中,其中一个页面是选择城市列表的页面,类似于美团饿了么城市选择,银行app中银行列表选择,通讯录中快速定位到联系人选择的锚点位置等这样的功能,作为刚入门不久的我来说,感觉这个功能还是有一点压力.下面我来分享一下我所查到的一些实现方法. 什么是锚点问题对于pc端网页来说,常见的网页右侧的回到顶部按钮,点击直接跳转到网页最上面,就是锚点的实现: 对于移动端来说,打开你手机的通讯录,点击右侧的字母,页面直接跳转到对应字母

C# datagridview 这是滚动条位置

1.datagridview 设置表格内容铺满,内容自动换行 dataGridView1.DefaultCellStyle.WrapMode = DataGridViewTriState.True; dgv.AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.Fill; 2.dategridview 实现点击单元格修改数据刷新后回到原来的位置上 (1) datagridview-----dataGridView1_Scroll事件 -

js实现div滚动条在页面刷新滚动条位置固定

思想:1.通过div的onscroll事件记录滚动条的scrollTop值,设置到document.cookie 2.页面加载时再读取document.cookie的值,设置给div的scrollTop js代码实现: function KeepScrollBar() { var scrollPos; if (typeof window.pageYOffset != 'undefined') { scrollPos = window.pageYOffset; } else if (typeof

盒模型padding和margin对滚动条位置的影响

前置条件:盒模型样式overflow-y:scroll; ①padding-right:15px的效果: padding对于滚动条的位置显然是没有影响的,这也不是我们要的结果(这样很难看!) ②margin-right:15px效果: 这样看起来就舒服多了!!!!! 本人表达能力有限只能上例子,请来者专家给予充分的解释,来拍我!

vue2 keepalive 保存滚动条位置

热门专题