移动端列表分页，删除交互优化

在小程序、H5等移动端中，列表的加载不同于PC端的表格，数据是分页显示的。

在移动端中，一般都是上滑加载新数据，但是不会切换显示已加载的上一页数据，而是拼接到底部。

该篇博客使用 Vue + elementUI 技术栈实现。

模拟数据库数据列表及分页查询 api

假设初始化有100条数据，存储的值为 1~100，在 vue 中用 dbList 变量表示。

那么分页读取的函数方法如下（模拟查询接口数据）

getData(currPage = 1, pageSize = 10) {let totalPage = Math.ceil(this.dbList.length / pageSize); // 最大分页let maxNum = pageSize + (currPage - 1) * pageSize;if (totalPage == currPage) {//maxNum = this.dbList.length;}let rows = [];for (let i = 0 + (currPage - 1) * pageSize; i < maxNum; i++) {rows.push(this.dbList[i]);}return {total: this.dbList.length,rows};},

上滑加载，初始化数据为

list: {rows: [], total: 0}

加载函数

getList(currPage = 1) {let data = this.getData(currPage);this.list.rows = [...this.list.rows, ...data.rows];this.list.total = data.total;},

这样初步完成了列表展示。

但是，问题来了

问题

如果我要加上删除操作，比如收藏夹或者购物车等列表操作，之类的场景，不做处理就会出现问题。

比如，我删除了列表2，第二页的数据从12开始，这时候分页就会出现问题。

解决

针对这个场景，当涉及到单个元素删除的操作时，

如果不是已加载完所有页面数据，可以在删除后重新请求当前页的数据，并做去重操作。

完整代码

<template><div><ul class="infinite-list" v-infinite-scroll="load"><liv-for="(item, index) in list.rows":key="index"class="infinite-list-item"@click="del(index)">{{ item }}</li></ul></div>
</template><script>
export default {data() {return {query: {currPage: 1,pageSize: 10},list: {rows: [],total: 0},dbList: []};},mounted() {let dbList = [];for (let i = 1; i < 101; i++) {dbList.push(i);}this.dbList = dbList;//this.getList();},methods: {load() {if (this.list.total != this.list.rows.length) {this.query.currPage += 1;this.getList(this.query.currPage);}},getList(currPage = 1) {let data = this.getData(currPage);this.list.rows = [...this.list.rows, ...data.rows];this.list.total = data.total;// this.setVal = new Set(data.rows); //},del(index) {this.dbList.splice(index, 1);this.list.rows.splice(index, 1);this.list.total -= 1;// 判断是否最后一页，向上取整let totalPage = Math.ceil(this.list.total / this.query.pageSize);if (this.query.currPage == totalPage || totalPage < this.query.currPage) {return;}let data = this.getData(this.query.currPage);this.list.rows = [...this.list.rows, ...data.rows];let rows = new Set(this.list.rows);this.list.rows = [...rows];this.list.total = data.total;},getData(currPage = 1, pageSize = 10) {let totalPage = Math.ceil(this.dbList.length / pageSize); // 最大分页let maxNum = pageSize + (currPage - 1) * pageSize;if (totalPage == currPage) {//maxNum = this.dbList.length;}let rows = [];for (let i = 0 + (currPage - 1) * pageSize; i < maxNum; i++) {rows.push(this.dbList[i]);}return {total: this.dbList.length,rows};}}
};
</script>
<style scoped>
.infinite-list {height: 300px;padding: 0;margin: 0;list-style: none;overflow: auto;
}
.infinite-list .infinite-list-item {display: flex;align-items: center;justify-content: center;height: 50px;background: #e8f3fe;margin: 10px;color: #7dbcfc;
}
</style>

移动端列表分页，删除交互优化相关推荐

dedecms 栏目列表页链接如何优化
这篇文章主要介绍了dedecms 栏目列表页链接如何优化,具有一定借鉴价值,需要的朋友可以参考下.希望大家阅读完这篇文章后大有收获.下面让小编带着大家一起了解一下. dedecms 栏目列表页链接怎 ...
清除浏览器缓存之后为什么还是显示旧的html页面_H5缓存机制浅析-移动端Web加载性能优化...
1 H5缓存机制介绍 H5,即HTML5,是新一代的HTML标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5引入的离线存储,这意味着 web 应用可进行缓存,并可在没 ...
android实现箭头流程列表_反思|Android 列表分页组件Paging的设计与实现：系统概述...
作者:却把清梅嗅链接:https://github.com/qingmei2/blogs/issues/30 前言本文将对Paging分页组件的设计和实现进行一个系统整体的概述,强烈建议读者将本 ...
H5缓存机制浅析-移动端Web加载性能优化
1 H5缓存机制介绍 H5,即HTML5,是新一代的HTML标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5引入的离线存储,这意味着 web 应用可进行缓存,并可在没 ...
H5缓存机制浅析-移动端Web加载性能优化【干货】
转载:H5缓存机制浅析-移动端Web加载性能优化[干货] 作者:贺辉超,腾讯游戏平台与社区产品部高级工程师目录 1 H5缓存机制介绍 2 H5缓存机制原理分析 2.1 浏览器缓存机制 2.2 Do ...
京东三级列表页持续架构优化—前端优化实践
在持续开发一个核心系统过程中,除了满足业务需求外,还应该考虑系统未来的架构,追求极致的系统的可用性.高性能和稳定性.这个过程是一个长期积累和重构的过程. 每个应用都要满足自己特定的需求,因为商业条件. ...
mysql百万数据查总数都特别慢_mysql百万级数据分页查询缓慢优化方法
参考网址1:https://www.cnblogs.com/nightOfStreet/p/9647926.html -------------修改需求一.与产品商讨修改需求 ...
新手站长说说之织梦DedeCMS列表页标题SEO优化
织梦DedeCMS列表页标题SEO优化织梦无忧织梦技巧摘要: 织梦DedeCMS栏目列表的标题是重复的,在谷歌站长工具,就会有相关的提示:重复的标题标记,说明这个对搜索引擎是很不友好的.当然,这 ...
反思|Android 列表分页组件Paging的设计与实现：系统概述
前言本文将对Paging分页组件的设计和实现进行一个系统整体的概述,强烈建议读者将本文作为学习Paging 阅读优先级最高的文章,所有其它的Paging中文博客阅读优先级都应该靠后. 本文篇幅较 ...

移动端列表分页，删除交互优化

模拟数据库数据列表及分页查询 api

问题

解决

移动端列表分页，删除交互优化相关推荐

最新文章

热门文章