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

原创

于 2024-08-05 14:02:20 发布 · 661 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

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

<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>