js 实现 点击上一篇、下一篇功能

列表界面：

详细界面：

 思路：

1. 首先目录列表渲染的数据是通过接口调用取到的值，然后点击具体某一条数据的时候，获取到他的 ID，然后通过路由跳转的时候带到详细信息页面。

2. 在详细页面中，先再次调用一次目录列表数据的接口，因为详细页面是公用的页面，只是通过上面的传值进行判断你是哪个页面传过来的，然后再去获取到你路由带过来的值，声明变量去存储起来，然后在使用for 循环取对比接口数据的ID 进行匹配，然后获取到数据。

3. 需要注意的一点就是，你需要判断一下你的数据是否是第一条和最后一条,以及只有一条数据的时候，这时候需要做一下单独的处理，如果不是那就还是一样的逻辑代码。

 代码：

html 部分：

 js 代码：

$scope.type = getQueryString("type")   //获取路由的带过来的type ，用于区分不同的页面

$scope.id = $location.$$search.id;    //获取路由的带过来的id

获取详细信息代码

 

获取目录列表数据信息，以及数据对比

 

 

点击上下翻页 代码

 if($scope.listlegth != true){}    这一层判断是为了防止数据只有一条时，用户再次点击上下翻页时，接口重复调用，避免资源浪费