实际开发中，前端实现数据分页

实际开发中，有些场景需要前端实现分页，具体代码实现如下

<template>
   <!-- 首页的专题服务模块  -->
  <div class="special-service" v-if="specialServiceList.length > 0">
    <div class="special-service-content">
      <TitBox tit="专题服务">
        <div class="right-op" v-if="specialServiceList.length > 3">
            <div :class="ifActive === 'left' && 'activation'" class="left" @click="leftFn"><a-icon type="left" /></div>
            <div :class="ifActive === 'right' && 'activation'" class="right" @click="rightFn"><a-icon type="right" /></div>
        </div>
      </TitBox>
      <div class="special-service-list">
        <div class="item" v-for="item in tempSpecialServiceList" :key="item.id" @click="clickItemFn(item.sceneUrl)">
          <img :src="item.url" alt="">
          <h2>{{item.title}}</h2>
        </div>
      </div>
      <div class="look-more" @click="ztMoreFn">查看更多<a-icon style="margin-left: 8px;" type="swap-right" /></div>
    </div>
  </div>
</template>

<script>
import TitBox from './TitBox.vue';
export default {
    props : ["specialServiceList"],
    data() {
        return {
          tempSpecialServiceList : [],
          ifActive : "right",
          pageNum : 1,
          pageSize : 3
        }
    },
    watch : {
      // specialServiceList   父组件传的，也是接口返回的所有数据的容器
      specialServiceList : {
        handler(newData) {
          if(newData.length > 0) {
            // 监听
            this.tempSpecialServiceList = this.specialServiceList.slice((this.pageNum - 1) * this.pageSize, this.pageNum * this.pageSize);
          }
        },
        immediate : true
      },
      // 监听页码的改变 再次处理this.specialServiceList
      pageNum(){
        this.tempSpecialServiceList = this.specialServiceList.slice((this.pageNum - 1) * this.pageSize, this.pageNum * this.pageSize);
      }
    },
    components : {
      TitBox
    },
    methods : {
      // 专题服务查看更多
      ztMoreFn() {
        this.$router.push({ name: "SpecialService"});
      },
      clickItemFn(sceneUrl) {
        window.open(sceneUrl,"_blank");
      },
      leftFn() {
        this.ifActive = "left";
        if(this.pageNum === 1) {
          this.pageNum = 1;
        } else {
          this.pageNum -= 1;
        }
      },
      rightFn() {
        this.ifActive = "right";
        if(this.tempSpecialServiceList.length === 0) return;
        this.pageNum += 1;
      }
    },
};
</script>

<style scoped>
</style>

核心代码

// this.specialServiceList 保存的是后端返回的所有数据
// this.pageNum 当前页码
// this.pageSize  每页条数
this.specialServiceList.slice((this.pageNum - 1) * this.pageSize, this.pageNum * this.pageSize)