vue-使用keepAlive对上下拉刷新列表数据 和 滚动位置细节进行处理
【前言】
使用vue处理项目中遇到列表页面时,有一些细节需要注意,这里总结一下,以便优化以后的代码。如下:
1. 使用mint-ui中的LoadMore组件上下拉刷新时,有时无法触发上拉加载更多的方法。还有ios上滚动不太流畅。
2. 从列表进入详情(列表数据分页请求的),再返回时,列表页需要记住之前的滚动位置,记住它上次的数据,但从其他页面进入列表页时,需要它重新刷新。(ps: 好像后面的vue版本对keepAlive页面滚动条会自动记录并处理)
【需要实现效果】
本demo将实现如下效果。
【实现思路】
1. 使用 mint-ui 中 LoadMore 组件,定时器延时模拟上下拉刷新。
2. 将B页的 keepAlive 设置为true,在这个页面的路由钩子方法中判断是从哪个页面进入到的列表页,如果是从C页返回,那么就让B不刷新数据;从其他页面进来就让B刷新数据。这样可以实现 A -> B -> C过程中,如果 C -> B,那么B保持不变,其他页面进入B将重新刷新数据,这就像原生应用页面跳转了。
【需要处理的细节】
1. mint-ui中loadMore组件一些使用注意。
2. activated中根据不同页面刷新数据。
3. 使用vuex存储b页面进入c页面时的滚动条位置。
【相关代码】
1. mint-ui中loadmore组件需要对它外层包裹一层,且它的高度要进行设定,不然它的滑动会出现问题(有时无法触发加载更多方法,有时还没滑到底部就开始触发加载更多的方法)。如下:

<div class="content" :style="{height: contentH + 'px'}" ref="wrapper" @scroll="scrollEvent()">
<Loadmore class="LoadMore" :top-method="loadTop" :bottom-method="loadBottom" ref="loadmore">
<div class="item" v-for="(index, elem) in dataArray" @click="itemClick(index, elem)">
<p class="itemP">item_{{index}}</p>
</div>
</Loadmore>
</div>

然后对 contentH 变量的赋值如下
mounted() {
// mint-ui loadmore组件需要包裹,且内容高度要高于包裹才可加载更多,所以这时给包裹层 一个指定的高度
this.contentH = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
}
模拟上下拉刷新如下:

// 下拉刷新
loadTop() {
let that = this;
setTimeout(function() {
that.dataArray = [0, 1, 2, 3, 4, 5];
that.$refs.loadmore.onTopLoaded();
}, 1500);
},
// 上拉加载更多
loadBottom() {
let that = this;
setTimeout(function() { let tempArray = [];
let lastItem = that.dataArray[that.dataArray.length - 1];
for (let i = 0; i < 6; i ++) {
that.dataArray.push(i + lastItem + 1);
}
that.$refs.loadmore.onBottomLoaded();
}, 1500);
}

2. 在 B 的路由钩子中用变量记录来自哪个页面。

beforeRouteEnter(to, from, next) { if (from.name != 'C') {
isFromC = false;
} else {
isFromC = true;
} next();
}

3. vuex中记录 B 页面滚动条位置

const state = {
pageYOffset: 0
} const mutations = {
setPageYOffset(state, val) {
state.pageYOffset = val;
}
} export default new Vuex.Store({
state, mutations
})

4. 进入C页面前,保存滚动条位置

itemClick(item, index) { // 进入C页面
// 保存滚动条位置
this.$store.commit('setPageYOffset', this.$refs.wrapper.scrollTop);
this.$router.push({
name: 'C',
params: {
item: item,
index: index
}
});
}

5. 在activated方法中处理滚动条位置及数据初始化。

activated() {
if (isFromC) { // 来自C页面
this.$refs.wrapper.scrollTop = this.$store.state.pageYOffset; } else { // 滚动到最顶,数据初始化
this.$refs.wrapper.scrollTop = 0; this.dataArray = [0, 1, 2, 3, 4, 5];
}
}

6. 在ios上滑动不流畅样式设置处理,即 -webkit-overflow-scrolling: touch
.content {
margin-top: 49px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
【延伸】
利用路由的keepAlive,还可以处理其他更复杂的页面缓存,可以缓存页面临时性的信息,再通过路由的钩子函数处理数据清除的逻辑。这样就再也不担心单页应用中因为页面跳来跳去的数据处理了。即可以模拟类似原生app中页面push和pop时的数据状态变化。
【demo地址】
https://github.com/LiJinShi/vue_keepAlive
原文:https://www.cnblogs.com/buerjj/p/8405443.html
vue-使用keepAlive对上下拉刷新列表数据 和 滚动位置细节进行处理的更多相关文章
- 使用keepAlive对上下拉刷新列表数据 和 滚动位置细节处理 - vue
[前言] 使用vue处理项目中遇到列表页面时,之前项目中总会有一些细节问题处理得不太好,这里总结一下,以便优化以后的代码.如下: 1. 使用mint-ui中的LoadMore组件上下拉刷新时,有时无法 ...
- 第三方开源框架的下拉刷新列表(QQ比较常用的)。
PullToRefreshListView是第三方开源框架下拉刷新列表,比较流行的QQ 微信等上面都在用. 下载地址(此开源框架于2013年后不再更新) 点此下载 package com.lixu.k ...
- android118 上拉下拉刷新列表listView实现
MainActivity.java package com.heima52.pullrefresh; import java.util.ArrayList; import com.heima52.pu ...
- vue单页应用中 返回列表记住上次滚动位置、keep-alive缓存之后更新列表数据 那点事
实践场景需求 产品列表中,滚动到一定位置的时候,点击查看产品信息,后退之后,需要回到原先的滚动位置,这是常见的需求 所有页面均在router-view中,暂时使用了keep-alive来缓存所有页面, ...
- Vue移动端项目中下拉刷新和上拉加载
Vue2.0中引入Mint-UI的下拉刷新和上拉加载.简单粗暴 安装Mint-UI npm i mint-ui -S 引入 打开项目的main.js入口文件,引入并使用.注意,为了方便,这里是全部引入 ...
- 基于Vue手写一个下拉刷新
当然不乏有很多下拉刷新的插件可以直接使用,但是自定义程度不强,大部分都只能改改文字,很难满足设计师的创意,譬如淘宝和京东首页那种效果,就需要自己花心思倒腾了,最近刚好有这种需求,做完了稍微总结一下,具 ...
- 下拉刷新列表添加SwipeDismissListViewTouchListener实现滑动删除某一列。
<Android SwipeToDismiss:左右滑动删除ListView条目Item> Android的SwipeToDismiss是github上一个第三方开源框架(github上的 ...
- ionic3.0 中带顶部导航的下拉刷新列表的实现
1.最终实现效果 2.html代码布局: 3.css样式控制(注:下面这两个css类名需在浏览器解析后才可看到)
- vue中的iviewUI导出1W条列表数据每次只导出2000条的逻辑
导出弹窗的html <template> <Modal v-model="exportModal" width=400 :closable="false ...
随机推荐
- 【转】VC和VS的区别
各个版本之间的对应关系 使用windows平台搞开发时,下载第三方库时经常会遇到文件名以VCxx版本号命令,VC版本如何转换成对应的VS的版本呢,这里总结一下vc和vs的关系. Microsoft V ...
- ssh无密码连接
1. 生成密钥对文件 [root@centos2 ~]# -t 指定加密类型 -b 指定密钥对加密长度 询问1:执行过程中会询问保存位置,一般默认保存在当前用户家目录下的.ssh/目录下 询问2:是否 ...
- Kotlin使用处协变的意义与用法
在上一次https://www.cnblogs.com/webor2006/p/11294849.html中对于Java的协变和Kotlin的协变提到了它们的区别,回忆一下: 其实在Kotlin中也有 ...
- linux系统编程之信号(一)
今天起,开始新的知识的学习,对于上个系列进程的学习还差一个理论上的总结,这个会下次补回来,以便通过实践之后,再用理论将其巩固一下,好了,话不多说,开始进入这个主题的学习----信号,很重要,但不是太容 ...
- 二.protobuf3数据类型
定义数据类型 首先让我们看一个非常简单的例子.假设您想要定义搜索请求消息格式,其中每个搜索请求都有一个查询字符串.您感兴趣的特定结果页面以及每页的结果数量.这是用来定义消息类型的.proto文件. s ...
- 使用Jackson的@JsonFormat注解时出现少了 8 个小时
比如数据库存的日期是2018-01-05,转成json则变成了2018-01-04 解决办法: @JsonFormat(pattern="yyyy-MM-dd") public D ...
- select下拉选中显示对应的div隐藏不相关的div
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Kubernetes 学习15 kubernetes 认证及serviceaccount
一.概述 1.通过此前描述可以知道k8s是以后运行我们生产环境中重要应用程序的尤其是无状态程序的一个非常重要的平台.这里面能托管一些核心应用以及核心数据,很显然对于k8s对应接口的访问不是任何人都可以 ...
- Xshell5 安装JDK
.执行命令yum -y list java*查看可安装java版本.执行成功后可以看见如下的结果 安装java-1.8全部相关 yum install -y java-1.8.0-openjdk* 使 ...
- am335x system upgrade rootfs for bridge-utils cross compile (十四)
bridge-utils移植 [目的] 移植bridge-utils的目是在AM335X开发板上使用bridge功能. [环境] 1. Ubuntu 16.04发行版 2. MC183平台 3. ...