vue keep-alive 不保留scroll位置

2024-08-23

记录下vue keep-alive IOS下无法保存滚动scroll位置的问题

最近做的项目,遇到了一点小麻烦,就是我一个页面A页面是加载列表数据 ,B页面是展示详细信息的.A进去B时,缓存A页面. 效果做出来后,缓存是缓存数据了,但是当我A页面的列表数据好多,要滚动浏览时,点击到B详细信息的再次返回A页面时, 在安卓下面貌似没什么问题,滚动到哪里还是到原来的位置.在IOS下滚动的位置变了,经自己IP6测试滚动位置都是222, 后来用百度各种方法,vuex什么的自己也试过还是不行..后面还是找到了解决方法, main.js里面,生成 router时添加以下

vue路由管理－保留滚动位置功能、按需加载模块名自定义

路由管理:保留滚动位置其实现与组件的keep-alive相关,仅设置了keep-aive的页面,实施保留回退位置能力. keep-alive介绍作用把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染,提升切换性能. 相关的生命周期 created() { console.log('created') }, activated() { console.log('activated') }, deactivated() { console.log('deactivated') },

vue滚动行为控制——页面跳转返回上一个页面保留滚动位置

需求分析: 一般这个功能在后台管理系统用的比较多,因为后台页面都是在当前页面打开,对于某些列表筛选页,如果列表数据比较多,页面就会滚动.当页面发生滚动,对列表数据进行查看或者编辑的时候,跳转到下一级页面,然后点击浏览器返回按钮的时候,我们是希望能保持之前的滚动位置的. 缓存?解决这个问题,第一时间想到的是缓存keep-alive,但是缓存只是不执行create/mounted生命周期钩子,页面滚动位置是无法保留的,通过缓存的方法无法实现这个效果. 滚动?也有同事提过使用滚动模拟,但是vue是单页

vue 路由跳转记住滚动位置，返回时回到上次滚动位置

参考:https://blog.csdn.net/qq_40204835/article/details/79853685 方法一: 利用Keep-Alive和监听器 1.首先在路由中引入需要的模块 { path: ‘/scrollDemo’, name: ‘scrollDemo’, meta: { keepAlive: true // 需要缓存 }, component: resolve => { require([‘../view/scrollDemo.vue’], resolve) } }

使用better-scroll在vue中封装自己的Scroll组件

1. better-scroll 原理用一张图感受: 绿色部分为 wrapper,也就是父容器,它会有固定的高度.黄色部分为 content,它是父容器的第一个子元素,它的高度会随着内容的大小而撑高.那么,当 content 的高度不超过父容器的高度,是不能滚动的,而它一旦超过了父容器的高度,我们就可以滚动内容区了,这就是 better-scroll 的滚动原理. 2. 创建一个 Scroll.vue 组件注意:在使用better-scroll组件时,必须外层有一个wrapper,内层有一个

js金额数字格式化实现代码(三位加逗号处理保留两位置小数)

工作中很常用的东西: 例1,使数字1111111变成11,111,111.00,保留两位小数. <html> <head> <script type="text/javascript"> function outputmoney(number) { number = number.replace(/\,/g, ""); if(isNaN(number) || number == "")return "

Ckeditor失去焦点前保留光标位置

var $selection = CKEDITOR.instances.myEditor.getSelection();//当前选中区域 var $bookmarks = $selection.createBookmarks2();//当前光标 $selection.selectBookmarks($bookmarks);//还原光标位置

Vue列表实现滚动到指定位置样式改变

这个需求大概是这样子: 我做的一个聊天Demo,在搜索框搜索用户,可以滚动到指定的用户.然后成选中状态. 这是目前状态,我搜索南宫仆射 ,想要下面的用户列表直接滚动到南宫仆射并改变CSS样式. 查询之后是这个子: 嗯,我的思路: 在搜索框搜索到用户之后会返回一个用户对象,之后会调用列表的点击事件,改变CSS样式及做一些聊天的逻辑.然后需要获取到列表对应的id值,直接使用 document.getElementById(it).scrollIntoView(); 具体实现: 列表:使用

vue中计算小数保留两位小数

代码

vue 项目其他规范

列表 vuex数据管理 * 数据模块化:vuex数据管理-数据模块化数据适配:vuex数据管理-数据适配数据共享:vuex数据管理-数据共享路由优化 keep-alive组件设置保留滚动位置链接:vue路由管理-保留滚动位置功能.按需加载模块名自定义 webpack配置按需加载包名称自定义链接:vue路由管理-保留滚动位置功能.按需加载模块名自定义 z-index叠层规范基础布局的唯一性组件的相关规范 z-index叠层规范 lever1:普通content:1-99: lev

PyQt5——隐藏控件并保留位置

原文地址:https://blog.csdn.net/qq_38161040/article/details/86605798 ———————————————————————————————— 设置控件的可见度为0每种控件都有3种设置可见度为0的方法,下面来拿按钮的来举例了.# 标准的隐藏# 方法一:self.pushButton_3.hide()# 方法二:self.pushButton_3.setHidden(True)# 方法三:self.pushButton_3.setVisible(F

一个 VUE 组件：实现子元素 scroll 父元素容器不跟随滚动（兼容PC、移动端）

介绍我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚动完成后,不触发父元素的滚动,比如 modal.侧边栏等等. 深入研究-webkit-overflow-scrolling:touch及ios滚动详细文档 & 例子 Document & Demo vue-scroll-lock 一个 VUE 组件:子元素 scroll 父元素容器不跟随滚

vue强制组件重新渲染

有时候,依赖 Vue 响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据.或者,我们可能只想抛开当前的DOM,重新开始.那么,如何让Vue以正确的方式重新呈现组件呢? 强制 Vue 重新渲染组件的最佳方法是在组件上设置:key. 当我们需要重新渲染组件时,只需更 key 的值,Vue 就会重新渲染组件. 这是一个非常简单的解决方案. 当然,你可能会对其他方式会更感兴趣: 简单粗暴的方式:重新加载整个页面不妥的方式:使用 v-if 较好的方法:使用Vue的内置forceUpda

Vue 源码解读（5）—— 全局 API

目标深入理解以下全局 API 的实现原理. Vue.use Vue.mixin Vue.component Vue.filter Vue.directive Vue.extend Vue.set Vue.delete Vue.nextTick 源码解读从该系列的第一篇文章 Vue 源码解读(1)-- 前言中的源码目录结构介绍中可以得知,Vue 的众多全局 API 的实现大部分都放在 /src/core/global-api 目录下.这些全局 API 源码阅读入口则是在 /src/cor

vue监听滚动事件，实现滚动监听

在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg

Vue（四）组件

组件的复用这里的工程和上一节的一样先建立一个组件 MyButton.vue <template> <button @click="count++">You clicked me {{ count }} times</button> </template> <script> export default { name: "MyButton", data: () => ({ count: 0 }) }

Vue+koa2开发一款全栈小程序(8.图书列表页）

1.图书列表页获取数据 1.在server/routes/index.js中新增路由 router.get('/booklist',controllers.booklist) 2.在server/controllers下新增booklist.js const {mysql}=require('../qcloud') module.exports=async(ctx)=>{ const books=await mysql('books').select('*').orderBy('id','des

Vue+Flask看这篇就够了

一.项目目录结构使用Vue+Flask搭建前后端分离的基础平台. my_project/ app/ //vue目录 static/ models/ remplates/ 404.html index.html views/ __init__.py index.py run.py settings.py README.md my_project为项目根目录,my_project/app为Vue项目文件所在位置,其他文件和文件夹为flask项目的基本目录或者文件,在具体使用中再具体分析. 二.项目

Vue 框架-12-Vue 项目的详细开发流程

Vue 框架-12-Vue 项目的详细开发流程首先,如果你还不了解 Vue 脚手架怎么搭建? 默认的环境中有哪些文件? 文件大概是什么作用? 那么,您要先查看之前的文章才有助于你理解本篇文章: Vue 框架-10-搭建脚手架 CLI + 批处理快捷启动 Vue 框架-11-介绍src文件流程及根组件app+HBuilder 配置 (一)Vue 组件及环境依赖介绍大家打开 Vue 脚手架的环境,再打开搭建的项目中的入口文件 index.html 文件,这样: 其实,你会发现里面 index.h

第4章-Vue.js 交互及实例的生命周期

一.学习目标了解实例生命周期的过程理解钩子函数的作用掌握Vue.js过滤器的使用方法 (重点) 能够使用网络请求进行前后端交互 (重点.难点) 二.交互的基本概念 2.1.前端和后端的概念说明:任何一个应用程序都有前端和后端前端:客户端,就是浏览器后端:服务器 2.2.前后端交互原理 2.3.交互的应用场景从后端获取一些数据,将其进行展示或计算将用户在页面中提交的数据发送给后端三.Vue.js交互 3.1.Vue.js交互 Vue.js交互需使用 vue-resource.js

vue keep-alive 不保留scroll位置

热门专题