一、案例简介

开发中有一个数据列表，每一行可以点击查看对应的详情页面。但是每次点击进入详情页面之后想要看下一条数据的详情需要关掉当前页面重新打开下一条，使用人员觉得比较麻烦，所以要求在详情页加上（上一篇，下一篇）两个按钮，以供他们直接点击翻篇，查看详情更为方便。

二、思路

1、首先每个详情页面都有一个接口来获取详情页面内容，即每个详情页有个列表对应id
2、获取列表全量的id(可以根据列表自己筛选id然后push进一个数组 也可以让后端提供一个接口， 我这里由后端提供)
3、进入详情页面时找到当前页面id在全量id数组的下标（使用findIndex）,着重判断第一个和最后一个的位置
4、如果第一个则点击上一篇是提示为第一条或者禁用上一篇按钮 最后一个时跟前面逻辑一样，都简单做一下判断即可

三、案例代码

1.html

代码如下（示例）：只写关键部分

 <el-button size="mini" plain  type="primary" @click="handlePrevious">上一篇</el-button>
 <el-button size="mini" plain  type="primary" @click="handleNext">下一篇</el-button>

2.data

代码如下（示例）：

operList: [], //  全量id  [{id:'1'},{id:'2'}] 这种形式
index: 0, // 当前页面下标
pageId: '' // 当前页面id

---

3.js

代码如下（示例）：

// 上一篇
handlePrevious () {
	this.index = this.operList.findIndex(item => item.id === this.pageId)
	if(this.index === 0){
		// 提示已经是第一篇或者禁用上一篇按钮 自由发挥咯
	} else {
		this.pageId = this.operList[this.index-1].id // 获取上一篇id 在getList()里需要
		this.getList() // 获取详情数据的接口
	}
},
// 下一篇
handleNext () {
	this.index = this.operList.findIndex(item => item.id === this.pageId)
	if(this.index >=  this.operList.length-1){
		// 提示已经是最后一篇或者禁用下一篇按钮 自由发挥咯
	} else {
		this.pageId = this.operList[this.index+1].id // 获取下一篇id 在getList()里需要
		this.getList() // 获取详情数据的接口
	}
},
// 获取详情数据
getList() {	
	xxx.({id: this.pageId}).then(res = > {})
}

---

总结

以上就是我遇到的情况，简单的做个分享，如果有帮助帮你，不要吝啬你的小赞哦！