一、案例简介

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

二、思路

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 = > {})
}

总结

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

vue列表进入详情页实现上一篇下一篇功能相关推荐

vue项目实现详情页后退缓存之前的数据
vue项目实现详情页后退缓存之前的数据 2019年02月19日 14:54:57 不想写代码的程序员阅读数:244 一.需要缓存的内容: 1.后退缓存条件查询的数据 2.后退缓存分页信息二.实现 ...
vue实战-产品详情页（轮播图、放大镜）
vue实战-产品详情页(轮播图.放大镜) 1.添加产品详情页的静态组件因为它是路由组件,将其放入pages文件夹下. 注册路由组件 1)router中添加Detail的路由. {path:'/det ...
仿淘宝详情页直接上代码
仿淘宝详情页直接上代码 package com.example.liketitledemo;import android.content.Context; import android.graphi ...
vue通用商品详情页
vue通用商品详情页 <template><div class="goodsinfo-container"><transition@before-en ...
爬取电影天堂电影列表和详情页
爬取电影天堂电影列表和详情页 import requests from lxml import etreebase_list_url = 'https://www.dytt8.net'headers ...
微信小程序新闻列表及详情页
微信小程序新闻列表及详情页页面效果新闻列表 <view class="conatiner"><view class="news-item" ...
ShopEx文章页增加上一篇下一篇功能
在所有的文章页中,会经常发现都会有这么一个功能,能引导用户去查看上一篇文章或下一篇文章,而在ShopEx中,我DEZEND了一下文章模型,并没有找到上一篇这样的函数功能,因此,这就需要我们手动在对应的 ...
如何修改dede文章页上一篇下一篇＂没有了＂
dedecms上一篇下一篇调用标签: {dede:prenext get='pre'/} {dede:prenext get='next'/} 如何自定义织梦dedecms上一篇下一篇标签调用内容呢, ...
织梦手机站文章页调用显示只显示上一篇下一篇不显示标题
include目录下的这个文件:arc.archives.class.php中做以下修改将827行代码-834行代码替换成$this->PreNext['pre'] = "上一篇:& ...

vue列表进入详情页实现上一篇下一篇功能