actived 缓存列表滚动位置不变

2024-11-02

vue单页应用中返回列表记住上次滚动位置、keep-alive缓存之后更新列表数据那点事

实践场景需求产品列表中,滚动到一定位置的时候,点击查看产品信息,后退之后,需要回到原先的滚动位置,这是常见的需求所有页面均在router-view中,暂时使用了keep-alive来缓存所有页面,所以进入不同分类的产品列表,和不同的产品详情页面,需要更新数据首先注意: 本次实践测试环境为pc端的webkit内核浏览器,手机暂时不测试使用$router.back(-1) 和浏览器后退按钮效果一样必须使用keep-alive缓存路由页面才能记住上次的位置,否则使用浏览器后退或$router

微信小程序开发——列表分页上拉加载封装实现（订单列表为例，订单状态改变后刷新列表滚动位置不变）

业务需求: 业务需求是给订单列表添加分页功能,也就是上拉加载这种每次只请求加载固定数量的数据. 需求分析: 对业务来说就是简单的分页上拉加载,但是对于技术实现来说,除了要处理分页数据的累加加载,还要处理操作订单返回列表后需要更新列表数据以同步订单最新状态,其中的难点在于后者. 当然你可以直接重新初始化列表数据(请求加载第一页),但是小程序中会记忆数据重载之前的滚动位置,所以要进行处理使页面滚动到顶部.但是如果订单列表数据比较多,用户操作的订单在第一页之后,那么操作订单后返回列表查找之前操作的订单

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

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

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

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

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

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

JQuery实现页面企业广告图片切换和新闻列表滚动效果

最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果,整理如下: 前段代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

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

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

vue-scroller记录滚动位置

问题描述: 列表页进入详情页,或者tab页切换,然后再返回列表页,希望能切换到之前滚动位置解决问题思路: 切换到其他页面前记录位置,返回列表页的时候返回位置.这就需要借助vue-router的beforeRouteEnter和beforeRouteLeave这两个钩子去实现. 还有一种更简单粗暴的方法, vue-scroller.min.js源码中添加宽高不为零判断,实现方式见评论,是最近代码优化的时候发现的. 代码部分: beforeRouteEnter(to,from,next){ if(

仿网易/QQ空间视频列表滚动连播炫酷效果

代码地址如下:http://www.demodashi.com/demo/11201.html 一.准备工作 AndroidStudio 开发环境需要下载七牛的开源播放器SDK 本例子实现了仿网易/QQ空间视频列表滚动连播炫酷效果二.程序实现实现的功能滚动时不播放,但是要亮起,当前屏幕内,item view显示百分比最大的一个. 停止滚动且手指抬起时自动播放. 播放完当前的视频,自动滚动到下一个并自动播放. 正在播放的当前视频,快要播放完毕时,弹出TextView提示播放下一个,点击Te

React+React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆

2018年12月17日更新: 修复在qq浏览器下执行pop跳转时页面错位问题本文的代码已封装为npm包发布:react-slide-animation-router 在React Router中,想要做基于路由的左右滑动,我们首先得搞清楚当发生路由跳转的时候到底发生了什么,和路由动画的原理. 首先我们要先了解一个概念:history.history原本是内置于浏览器内的一个对象,包含了一些关于历史记录的一些信息,但本文要说的history是React-Router中内置的history,每一个

vue 组件来回切换时记住上一个组件滚动位置(keep-alive）

记住组件滚动状态: 使用场景:从某列表组件进入详情页,在返回的时候需要保留列表组件状态,包括滚动的高度.这个时候需要keep-alive配合. 方法一:如下情况导航在做普遍用法.前提是使用keep-alive keep-alive提供了两个钩子函数: 1. acvitaved: keep-alive 组件激活时调用. 2. deactivated: keep-alive 组件停用时调用. 用法: 先找到组件的最外层滚动的标签的class或id. export default { n

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) } }

“Win10 UAP 开发系列”之在MVVM模式中控制ListView滚动位置

这个扩展属性从WP8.1就开始用了,主要是为了解决MVVM模式中无法直接控制ListView滚动位置的问题.比如在VM中刷新了数据,需要将View中的ListView滚动到顶部,ListView只有一个ScrollIntoView()方法可以控制滚动的位置,但最好在VM中不要出现直接控制View的代码,需要通过其他的方式. 使用一个扩展属性即可实现: /// <summary> /// 将ListView滚动到顶部使用方法:在ListView增加扩展属性 /// ext:ListViewSc

android开发之记录ListView滚动位置

这个问题本身不难,但是由于项目中的需求太过于复杂,结果导致这个问题变得不是那么容易实现.在网上一搜,结果如下: 我不知道是who copy who?反正介绍的所谓的三种方法,第一种都是无法运行的,很明显的bug,第二三种方法都是入门级知识,这几位大哥写博客自己都不先运行一下吗? 唉,不吐槽了,说说我的解决方案吧: 在需要记录滚动位置的地方执行下面的操作: int scrollPos = refreshListView.getFirstVisiblePosition(); View v1 = re

jcarousellite 实现图片列表滚动

jcarousel Lite与jcarousel 相比去掉了皮肤的约束,可以自定义的设置前后按钮和选项卡按钮,生成的html更加简洁,文件更小(2k) 下载链接:http://www.gmarwaha.com/jquery/jcarousellite/使用方法: <div class="类名"> <ul> <li></li> </ul> </div> <script type="text/javas

Android listView scroll 恢复滚动位置

相信大家尝试过许多方法恢复滚动位置,本人也找了许多方法,唯有这个方法好用,下面把代码贴出来声明两个变量 private int mPosition; private int lvChildTop; pause , resume方法 @Override public void onPause() { // TODO Auto-generated method stub super.onPause(); SharedPreferences mySharedPreferences = activit

vue2.0 页面A跳转到页面B，B页面停留在A页面的滚动位置的解决方法

如果页面A沿Y轴滚动一段距离,然后跳转到页面B: 在进入B页面时,B页面已经滚到页面A的距离,返回页面A,发现A还在之前的滚动位置: 这样体验就很不好,所以我们要进行一些处理: 我的方法是:在路由守卫回调中,设置每次进入路由时,将window的scroll值设置为0:window.scroll(0, 0);代码如下 // 全局路由守卫 router.beforeEach((to, from, next) => { // to: Route: 即将要进入的目标路由对象 // from: Rout

在RecyclerView列表滚动的时候显示或者隐藏Toolbar

先看一下效果: 本文将讲解如何实现类似于Google+应用中,当列表滚动的时候,ToolBar(以及悬浮操作按钮)的显示与隐藏(向下滚动隐藏,向上滚动显示),这种效果在Material Design 清单中有提到: “在合适的地方,当列表向下滚动,app bar可以退出屏幕,以便为内容区域留下更多的空间:而当列表向上滚动回来的时候,app bar又重新显示出来”. 注:这里的向下滚动是指滚动到下面查看更多内容,相对应的手势操作其实是往上.同理向上滚动是指查看前面的内容,而手势其实是向下. 虽然此

vue-router 页面切换后保持在页面顶部而不是保持原先的滚动位置的办法

vue-router有提供一个方法scrollBehavior,它可以使切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样. 这个功能只在 HTML5 history 模式下可用. const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // return 期望滚动到哪个的位置 } }) { x: number, y: number } { se

js 获取滚动位置，滚动到指定位置，平滑滚动

1.获取当前滚动条位置信息 var top = dom.scrollTop; // 获取y轴上的滚动位置 var left = dom.scrollLeft; // 获取x轴上的滚动位置 2.滚动到指定位置 dom.scrollTop = 150; // 滚动到y轴上(竖直方向)的150位置 dom.scrollLeft = 150; // 获取x轴上(水平方向)的150位置 3.平滑滚动到指定位置 dom.scrollTo({ top: 150, left: 150, behavior: 's

actived 缓存列表 滚动位置不变

热门专题

actived 缓存列表滚动位置不变