vue信息列表实现点击加载更多陆续显示后面数据

原理：在点击加载更多后进行判断：
javascript 复制代码
      if (this.currentPage < this.totalPages - 1) {
        this.currentPage++;
      }
如果当前页码小于总页码就让当前页码+1，通过计算属性动态更新开始和结束值，从而当前页面展示更多数据：
javascript 复制代码
      paginatedArtList() {
        const start = 0;
        const end = (this,this.currentPage + 1)*12;
        return this.artList.slice(start, end);
      },

html 复制代码

<template>
    <div class="client-box">
      <div class="client-top">
        <div class="client-top-text">
          <h1>客户案例</h1>
          <img src="@/assets/client-top.png" alt="" class="top-img">
          <img src="@/assets/client-top2.png" alt="" class="top-img2">
        </div>
      </div>

      <div class="client-content">
        <div class="client-artbox">
          <div class="client-art-list">
            <!-- list -->
            <div class="art-item-box">
              <div class="art-item" v-for="(art, index) in paginatedArtList" :key="index">
                  <a :href="art.artsrc">
                  <img :src="art.imgsrc" alt="">
                    {{art.title}}</a> 
                </div>
            </div>

            <!-- 加载更多 -->
             <div class="client-art-list-more">
              <button @click="loadMore" v-if="currentPage < totalPages - 1">加载更多</button>
              <button v-else>已显示全部</button>
             </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "Client",
    data() {
      return {
        currentPage: 0, // 当前页码
      };
    },
    computed: {
      artList() {
        return this.$store.state.artList;
      },
      paginatedArtList() {
        const start = 0;
        const end = (this,this.currentPage + 1)*12;
        // const start = this.currentPage * 9;
        // const end = start + 9;
        return this.artList.slice(start, end);
      },
      totalPages() {
        // 计算总页数
        return Math.ceil(this.artList.length / 12);  // 每页显示6条数据
      },
    },
    methods: {
      loadMore() {
      if (this.currentPage < this.totalPages - 1) {
        this.currentPage++;
      }
    }
  },
    mounted(){

    }
  }
  </script>
  
  <style coped>
    .client-top{
      width: 100%;
      background-color: #4095E5;
      height: 300px;
      margin-bottom: 65px;
    }
    .client-top-text{
      max-width: 1440px;
      margin: auto;
      display: flex;
    }
    .client-top-text h1{
      font-size: 50px;
      padding: 5% 0 0 15%;
      color: #ffffff;
      display: inline;
    }
    .top-img{
      margin-left: 15%;
    }
    .top-img2{
      width: 100px;
      height: 100px;
      margin-top: 10%;
      margin-left: -15%;
    }

    .client-content{
      max-width: 1440px;
      margin: auto;
      /* height: 700px; */
      padding-bottom: 50px;
    }

    /* list */
    .art-item-box{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        /*justify-content: space-around;*/
    }
    .art-item{
        width: 19%;
        margin: 3%;
        /*background-color: #cccccc;*/
    }
    .art-item img{
        width: 100%;
        display: block;
        box-shadow: 1px 1px 10px 5px #cccccc ;
        margin-bottom: 20px;
        transition: all 0.5s;
    }
    .art-item img:hover{
      transform: scale(1.1);
    }
    .art-item a{
        /* margin-top: 5px; */
        display: block;
        text-align: center;
        margin: auto;
    }

    .client-art-list-more{
      width: 100%;
    }
    .client-art-list-more button{
      position: relative;
      display: block;
      width: 200px;
      height: 50px;
      margin: auto;
      color: #ffffff;
      cursor: pointer;
      background-color: #BD3124;
      border: none;
      border-radius: 10px;
      transition: all 0.3s;
      font-size: 18px;
    }
    .client-art-list-more button:hover{
      background-color: #4095E5;
    }



    @media screen and (max-width:768px) {
      .client-top{
        margin-bottom: 20px;
      }
      .client-top-text{
        display: block;
      }
      .client-top-text h1{
        font-size: 40px;
        display: block;
        text-align: center;
        padding:unset;
        margin-bottom: 20px;
      }
      .top-img{
        width: 100%;
        margin-left: unset;
      }
      .top-img2 {
        width: 60px;
        height: 60px;
        margin-top: -12%;
        margin-left: 70%;
      }
      .art-item{
        width: 44%;
      }
    }
  </style>