纯前端实现上一条下一条切换，并实现跨页切换上一条下一条

2024-01-25 23:20
文章标签 实现 切换 前端 frontend 一条 跨页

本文主要是介绍纯前端实现上一条下一条切换，并实现跨页切换上一条下一条，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.开发遇到了新的需求：再进入到视频播放界面，需要支持可以点击上一条下一条按钮，实现数据切换的功能
2.功能开发的理解

在这里插入图片描述

需要考虑到以上的需求，
1.由于视频的入口不一致，要根据入口的不同，实现不同的上一条下一条
2.当数据发现跨页跳转的时候，需要调用和请求不同的接口
3.当数据发生跨页的时候，返回列表的时候，需要回到跨页后的列表
3.开发思路
首先，开发之前思路一定很重要，要先理清楚思路，再进行开发。（上一条下一条统称为跨条）
1，如何进行跨条切换，并且在筛选过后，要按照筛选的条件来进行跨条：在每次调用数据的时候，将里面的请求参数，列表的数据，全部储存到sessionStorage中，免得进入详情页后，刷新页面跨条失败的情况，然后在详情页通过findIndex参数，找到他在哪里
2.判断是否发生跨页，跨页后就发送相关请求，参数从sessionStorage里面获取。

4.开始开发

1.只有在用户点击的时候，再对数据进行存储，因为这里涉及到返回的时候，要取sessionStorage内的值。
点击的时候调用接口请求参数，并存储，传递false表示要存储 initTable(false)
const initTable = (isClear = true) => {if (sessionStorage.getItem('nextOrPrev')) {tableData.value.current = JSON.parse(sessionStorage.getItem('nextOrPrev'))?.filterList.currentPage}Api.send(ApiConfig.EVIDENCELIST, {currentPage: tableData.value.current,pageSize: tableData.value.pageSize,sortName: sort.sortName,sortOrder: sort.sortOrder,...props.searchForm,iconTypes:iconTypes}).then((res) => {if (res.data.status == 0 && res.data.msg == "success") {if (!isClear) {const filterList = {currentPage: tableData.value.current,pageSize: tableData.value.pageSize,sortName: sort.sortName,sortOrder: sort.sortOrder,...props.searchForm,iconTypes: iconTypes}const total = {total:res.data.data.totalCount}const type = {type:'evidence'}sesionPrevOrNext(res.data.data.list,filterList,total,type)}}}).finally(() =>{route.name === 'evidence' && isClear && sessionStorage.removeItem('nextOrPrev')});
};
sesionPrevOrNext是封装的函数
// 证据上一页下一页方法封装
export const sesionPrevOrNext = (lists,filterLists,totals,types) => {const eviIdList = lists.map(item => ({id:item.evidenceId || item.id,accessClass:item.accessClass,viewStatus:item.viewStatus}))const filterList = filterListsconst total = totalsconst type = typessessionStorage.setItem('nextOrPrev',JSON.stringify({eviIdList,filterList,total,type}))
}
进入详情后，切换，这是按钮
<div><a-button :disabled="forbidPrev" @click="goPrevOrNext(false)"><icon-left />上一条</a-button><a-button :disabled="forbidNext" @click="goPrevOrNext(true)">下一条<icon-right /></a-button>
</div>
4.判断
// 去上一个证据或者去下一个证据
const forbidPrev = ref(false)
const forbidNext = ref(false)// 获取证据数据并禁用相关按钮  getEviInfoList接口的调用，等详情页数据获取成功后再调用，否则可能会去不到实时的值，因为有延迟
const getEviInfoList = () => {const { eviIdList,filterList,total } = JSON.parse(sessionStorage.getItem('nextOrPrev')) const index = eviIdList.findIndex(item => item.id === route.query.id)// 当证据所处为第一页的第一个证据时，应该禁用上一页if (filterList.currentPage == 1 && index === 0) {forbidPrev.value = true}else{forbidPrev.value = false}// 计算他是否是最后一页的最后一个证据，禁用下一页const curEviCount = index + 1 + filterList.pageSize * (filterList.currentPage - 1)// 计算是否为最后一页的最后一个属性证据if (curEviCount===total.total) {forbidNext.value = true}else{forbidNext.value = false}// 请求数据 满足以下条件后，才对跨页数据进行数据请求let requestPrevData = index === 0 && filterList.currentPage !== 1let requestNextData = index + 1 === filterList.pageSize && curEviCount !== total.totalreturn { eviIdList,filterList,requestPrevData,requestNextData,index }
}
5.跳转
const goPrevOrNext = async (flag: boolean) => {const { eviIdList,filterList,requestPrevData,requestNextData,index } = getEviInfoList()if (flag) {// 当下一个证据有跨页，请求新的数据if (requestNextData) {// 下一页取他的第一个证据filterList.currentPage = filterList.currentPage + 1//等待数据请求完成之后，再执行以下代码逻辑const res = await initTable(filterList)if (res === 0) {// 及时更新eviIdList，filterList数据 否则会取到未更新的sessionStorage数据const { eviIdList } = JSON.parse(sessionStorage.getItem('nextOrPrev'))//跨页后的第一个gotoDetail(eviIdList[0])}}else{gotoDetail(eviIdList[index + 1])}} else {// 当上一个证据有跨页，请求新的数据if (requestPrevData) {// 前一页应倒过来let prevNum = nullfilterList.currentPage = filterList.currentPage - 1const res = await initTable(filterList)if (res === 0) {const { eviIdList, filterList } = JSON.parse(sessionStorage.getItem('nextOrPrev'))prevNum = filterList.pageSize - 1gotoDetail(eviIdList[prevNum])}}else{gotoDetail(eviIdList[index - 1])}}console.log(index, flag, route.query.id, JSON.parse(sessionStorage.getItem('nextOrPrev')))
}
5.1跳转不同，这里可能涉及到不同的入口，他的跳转方式不同，所有通过这个来控制
const gotoDetail = (record) => {const { type } = JSON.parse(sessionStorage.getItem('nextOrPrev'))if(type.type === 'evidence' || type.type === 'folderEvi'){myAndAlleviGo(record)}else if(type.type === 'myShare' || type.type === 'othersShare'){shareMeOrOtherGo(record)}else if(type.type === 'deleteEvi'){deleteEviGo(record)}
};
const myAndAlleviGo = (record) => {if ((record.accessClass == 1 && PERMMAP["dem:eems:evidence:viewEvidence:unrestricted"]) ||(record.accessClass == 2 && PERMMAP["dem:eems:evidence:viewEvidence:restricted"]) ||(record.accessClass == 3 && PERMMAP["dem:eems:evidence:viewEvidence:confidential"])) {if (record.viewStatus) {router.replace({name: "evidenceDetail",params: record.id,query: {id: record.id,accessClass: record.accessClass}});} else if (!record.viewStatus) {_this.$message.error($t('evidence.mapIndex.requestAccess'));}} else {if (!record.viewStatus) {_this.$message.error($t('evidence.mapIndex.requestAccess'));} else {_this.$message.error($t('evidence.mapIndex.requestAccess'));}}
}const shareMeOrOtherGo = (record) => {router.replace({name: "evidenceDetail",params: record.id,query: {pageFlag:'share',id: record.id}});
};const deleteEviGo = (record) => {router.replace({name: "evidenceDetail",params: record.id,query: {id: record.id,accessClass: record.accessClass,isDelete: 1}})
}

6.跨页获取数据

// 跨页获取数据
const initTable = (filterLists) => {const { type:Types } = JSON.parse(sessionStorage.getItem('nextOrPrev'))// 将异步操作封装成 Promise 对象return new Promise((resolve, reject) => {//书写映射，避免重复的if判断const requestApi = {"evidence":ApiConfig.EVIDENCELIST,'myShare':ApiConfig.GETSHAREEVIDENCEFROMME,'othersShare':ApiConfig.GETSHAREEVIDENCETOME,'deleteEvi':ApiConfig.EVIDENCELIST,'folderEvi':ApiConfig.QUERYFOLDEREVI}Api.send(requestApi[Types.type], filterLists).then((res) => {if (res.data.status == 0) {const filterList = filterListsconst total = {total: res.data.data.totalCount}const type = {type:Types.type}sesionPrevOrNext(res.data.data.list,filterList,total,type)// 异步操作完成后调用 resolve 函数resolve(res.data.status)} else {// 如果异步操作出错，则调用 reject 函数reject()}})})
}

这篇关于纯前端实现上一条下一条切换，并实现跨页切换上一条下一条的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/644942。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...
Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸： 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  （注意不能是bmp格式） 替换默认锁屏壁纸： 将图片资源放入vendo
阅读更多...
总有一条路，我们很迷茫

总有一条路，我们很迷茫

十年前，我家还处于一个贫穷落后的小山村，周围的人会根据我父母的收入来对待我，而十年后的今天，我家的那座小山村医成为重点开发的地区，一夜之间我家成了所谓的土豪，周围的人依然根据我家的收入对待我。现实，什么是现实?这就是现实。从那一刻，我开始明白要想得到别人的尊重，首先你得有别人尊重的实力。 所以，这么多年来不管自己过得多累，走得多艰辛，我都会一直坚持。在人生前进的道路，我们总会经历风雨，难免感到迷
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2