vue一个简单的上下翻页，位于首页时上一页不可点击

想写一个简单的上下分页效果，位于首页时上一页不可点击，位于最后一页时下一页不可点击

首先重要的是判断当前是否首页或最后一页，这里用了computed，我用的api是每次返回length为8的Array，并没有total属性，因此只能根据length是否小于8来判断是否最后一页，首页的话是有一个offset值，offset等于0即为首页。

  computed:{
    // 判断是否是最后一页
    isEndPage(){
      if(this.videoList.length<8) return true
      return false
    },
    // 判断是否是第一页
    isFirstPage(){
      if(this.videoParams.offset===0) return true
      return false
    }
  }

重要的东西有了，接下来就是css的部分了，不重要的代码我删除了，这里我写了一个常用的css类名库，可以从类名大概看出是什么样式。

这里说明一下，这里的上下页按钮用的是span，可以首页和最后一页要分别给span添加disabled类名

如果这两个样式一起用只会使用阻止事件，鼠标不会变成不可点击状态，因此只使用了cursor:not-allowed;

事件可以在@click中拦截。

.disabled{
	/* 鼠标会显示不可点 */
	cursor:not-allowed;
	/* 会阻止事件 */
	/* pointer-events: none; */  
}

<template>
  <div class="video-container">
    <div class="d-flex j-center mb-2">
      <span class="text-white py px-1 mr-2 rounded" @click="prevPage" :class="isFirstPage?'disabled sub-bg-color':'main-bg-color cur-point'">上一页</span>
      <span class="main-bg-color text-white py px-1 rounded" @click="nextPage" :class="isEndPage?'disabled sub-bg-color':'main-bg-color cur-point'">下一页</span>
    </div>
    <Loading v-if="!loading"></Loading>
  </div>
</template>

methods: {
    // 上一页
    prevPage(){
      // 如果是首页就返回
      if(this.isFirstPage) return;
      this.videoParams.offset-=1
    },
    // 下一页
    nextPage(){
      // 如果是最后一页就返回
      if(this.isEndPage) return;
      this.videoParams.offset+=1
    }
  }

修改this.videoParams的offset后重新获取数据