本文主要是介绍纯前端实现上一条下一条切换，并实现跨页切换上一条下一条，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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()}})})
}
这篇关于纯前端实现上一条下一条切换，并实现跨页切换上一条下一条的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
