上下篇文章切换

最新推荐文章于 2023-04-25 15:58:19 发布

傻狍子学前端

最新推荐文章于 2023-04-25 15:58:19 发布

阅读量547

点赞数 2

分类专栏：笔记 Vue 文章标签： elementui vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/TOP1999LHF/article/details/122219254

版权

笔记同时被 2 个专栏收录

17 篇文章

订阅专栏

Vue

7 篇文章

订阅专栏

上下篇文章切换（Vue.js）

<div>
  <p :style="{ visibility: isPrev ? 'unset' : 'hidden' }">
    <span>
      <div
        @click="previousPage"
      >&lt;&emsp;上一篇：{{ active != 0 ? totals[+active - 1].title : "" }}</div>
    </span>
  </p>
  <p :style="{ visibility: isNext ? 'unset' : 'hidden' }">
    <span>
      <div
        @click="nextPage"
      >下一篇：{{ active != totals.length - 1 ? totals[+active + 1].title : "" }}&emsp;&gt;</div>
    </span>
  </p>
</div>

totals(文章的数量)

data() {
    return {
      isPrev: true,
      isNext: false,
      active: 0
    };
  },
activated() {
    this.sanNew()
    this.currentId()
  },
methods: {
    sanNew() {
      //获取文章数据的接口
    },      
    previousPage() {
      //上一篇
      var index = this.totals.map(item => item.id).indexOf(+this.id)
      if (index != -1 && index != 0) {
        this.id = this.totals[index - 1].id
        this.sanNew()
      }
      this.currentId()
    },
    nextPage() {
      //下一篇
      var index = this.totals.map(item => item.id).indexOf(+this.id)
      if (index != -1 && index != this.totals.length - 1) {
        this.id = this.totals[index + 1].id
        this.sanNew()
      }
      this.currentId()
    },
    currentId() {
      for (let i in this.totals) {
        if (this.totals[i].id == this.id) {
          this.active = i
          this.isPrev = i == 0 ? false : true
          this.isNext = i == this.totals.length - 1 ? false : true
        }
      }
    }
}