【前言】

  使用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

使用keepAlive对上下拉刷新列表数据 和 滚动位置细节处理 - vue的更多相关文章

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

    [前言] 使用vue处理项目中遇到列表页面时,有一些细节需要注意,这里总结一下,以便优化以后的代码.如下: 1. 使用mint-ui中的LoadMore组件上下拉刷新时,有时无法触发上拉加载更多的方法 ...

  2. 第三方开源框架的下拉刷新列表(QQ比较常用的)。

    PullToRefreshListView是第三方开源框架下拉刷新列表,比较流行的QQ 微信等上面都在用. 下载地址(此开源框架于2013年后不再更新) 点此下载 package com.lixu.k ...

  3. android118 上拉下拉刷新列表listView实现

    MainActivity.java package com.heima52.pullrefresh; import java.util.ArrayList; import com.heima52.pu ...

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

    实践场景需求 产品列表中,滚动到一定位置的时候,点击查看产品信息,后退之后,需要回到原先的滚动位置,这是常见的需求 所有页面均在router-view中,暂时使用了keep-alive来缓存所有页面, ...

  5. 下拉刷新列表添加SwipeDismissListViewTouchListener实现滑动删除某一列。

    <Android SwipeToDismiss:左右滑动删除ListView条目Item> Android的SwipeToDismiss是github上一个第三方开源框架(github上的 ...

  6. ionic3.0 中带顶部导航的下拉刷新列表的实现

    1.最终实现效果 2.html代码布局: 3.css样式控制(注:下面这两个css类名需在浏览器解析后才可看到)

  7. mui 修改下拉刷新提示文字的显示位置

    第一种: .mui-bar-nav~.mui-content .mui-pull-top-pocket { top: 126px !important; } 第二种: .mui-pull-top-po ...

  8. mui实现列表的下拉刷新上拉加载

    1.引入mui控件的js文件和css样式文件 <link rel="stylesheet" href="css/mui.min.css"> < ...

  9. 微信小程序之下拉刷新,上拉更多列表实现

    代码地址如下:http://www.demodashi.com/demo/11110.html 一.准备工作 首先需要下载小程序开发工具 官方下载地址: https://mp.weixin.qq.co ...

随机推荐

  1. java基础概述

    写代码: 1,明确需求. 2,分析思路. 3,确定步骤. 4,代码实现. Java的三种技术架构: JAVAEE:Java Platform Enterprise Edition,开发企业环境下的应用 ...

  2. IntelliJ IDEA 使用技巧

    本着工欲善其事必先利其器的精神,闷头写代码之外花点时间研究一下自己用的 IDE,其带来的效率提升非常可观. 高效定位代码 无处不在的跳转 项目之间跳转 下一个 ctrl + alt + ] 上一个 c ...

  3. Hadoop-MyEclipse安装配置

    配置环境:Hadoop-1.2.1,MyEclipse,Centos6.5 网站上有很多关于Hadoop-eclipse的安装配置信息,但很少有讲到关于怎么在MyEclipse上配置Hadoop的相关 ...

  4. 【CSS3 transform属性和过渡属性详解】

    CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translat ...

  5. HUST 1555 A Math Homework

    1555 - A Math Homework 时间限制:1秒 内存限制:128兆 338 次提交 131 次通过 题目描述     QKL is a poor and busy guy, and he ...

  6. 【Java学习笔记之二十七】Java8中传多个参数时的方法

    java中传参数时,在类型后面跟"..."的使用:        public static void main(String[] args){       testStringA ...

  7. android仿漫画源码、抽奖转盘、Google相册、动画源码等

    Android精选源码 android实现仿今日头条的开源项目 波浪效果,实现流量的动态显示 美妆领域的app, 集成了摄像头取色, 朋友圈, 滤镜等 android仿漫画源码 android一个视差 ...

  8. 【android studio】 gradle配置成本地离线zip包

    http://blog.csdn.net/jingleye/article/details/52689260       关键词:distributionUrl修改成本地路径,android stud ...

  9. Java数据结构和算法(十二)——2-3-4树

    通过前面的介绍,我们知道在二叉树中,每个节点只有一个数据项,最多有两个子节点.如果允许每个节点可以有更多的数据项和更多的子节点,就是多叉树.本篇博客我们将介绍的——2-3-4树,它是一种多叉树,它的每 ...

  10. Dora.Interception, 一个为.NET Core度身打造的AOP框架[3]:Interceptor的注册

    在<不一样的Interceptor>中我们着重介绍了Dora.Interception中最为核心的对象Interceptor,以及定义Interceptor类型的一些约定.由于Interc ...