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

2024-01-25 23:20

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

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

相关文章

c++ 类成员变量默认初始值的实现

《c++类成员变量默认初始值的实现》本文主要介绍了c++类成员变量默认初始值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录C++类成员变量初始化c++类的变量的初始化在C++中,如果使用类成员变量时未给定其初始值,那么它将被

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

golang版本升级如何实现

《golang版本升级如何实现》:本文主要介绍golang版本升级如何实现问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录golanwww.chinasem.cng版本升级linux上golang版本升级删除golang旧版本安装golang最新版本总结gola

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具