根据数组数组,实现上一页下一页功能

根据数组数组,实现上一页下一页功能_第1张图片

     
          

  this.typeList:最终显示页面的数组

 this.typeNewList:后台返回的全部数组

    data() {
        return {
          currentPage: 1,
          totalPages: 0,
            pageSize :0
        }
    }
//pageSize :展示页面的长度
this.pageSize = this.typeList.length
//totalPages  :总数量的长度/ 展示页面的长度 = 总页数
 this.totalPages = Math.ceil(this.typeNewList.length / this.typeList.length); //总共页数

 // 分页
    prePage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.updateTypeList();
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.updateTypeList();
      }
    },
    updateTypeList() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = this.currentPage * this.pageSize - 1;
      this.typeList = this.typeNewList.slice(startIndex, endIndex + 1);
    },

 

 

你可能感兴趣的:(javascript,前端,vue.js)