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

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 = filterLists
  const total = totals
  const type = types
  sessionStorage.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 !== 1
  let requestNextData = index + 1 === filterList.pageSize && curEviCount !== total.total

  return { 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 = null
      filterList.currentPage = filterList.currentPage - 1
      const res = await initTable(filterList)
      if (res === 0) {
        const { eviIdList, filterList } = JSON.parse(sessionStorage.getItem('nextOrPrev'))
        prevNum = filterList.pageSize - 1
        gotoDetail(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 = filterLists
        const 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()
      }
    })
  })
}