vue 前端实现换一换或下一页功能分页

功能效果如下

前端实现换一批功能，到了最后一页，又回到第一页

因为后端没有加分页功能，只能前端实现分页功能。

 <div class="wupopup" if="{{wupopupflag}}">
      <div id="animation">
        <div class="bg3-box">
          <div class="adtitle">
            <text>大家都在看的热门小说</text>
          </div>
          <div
              class="books-box"
              for="{{newbookList}}"
              @click="goToDetail1($item.id)"
            >
              <div class="list-cover">
                <image src="{{$item.verticpic}}"></image>
              </div>
              <div class="list-text">
                <text class="headline">{{ $item.title }}</text>
                 <div class="books-desc">
                   <text >{{ $item.desc }}</text>
                 </div>
                  
                
                <div class="list-text-bottom">
                    <div class="bottom-left">
                       
                        <text>{{ $item.tags[0] }}</text>
                        <text class="shu">|</text>
                        <text>{{ $item.tags[1] }}</text>
                        
                       
                    </div>
                   <div class="bottom-right">
                      <text>去阅读</text>
                    </div>
                </div>
              </div>
            
          </div>
          <div class="hyp" @click="renderBook" if="{{advertisingBook.length>3}}">
            <text>换一批</text>
            <image src="../../assets/icon/hyp.png"></image>
          </div> 
        </div>
        <div onclick="goToHome" class="close">
          <image src="/assets/images/advclose.png"></image>
        </div>
        
      </div>
    </div>

template

分页js逻辑

renderBook() {
    var pagesize=3
     var len = this.advertisingBook.length;
     var group = len / pagesize;
     if (len % pagesize != 0) {
        group = parseInt(group) + 1;
     }
    // 一共有group页，当前页数num小于group 就＋1页
    if(group > this.num){
     
      this.timeStart= this.timeStart + pagesize
      this.timeEnd= this.timeEnd + pagesize
      this.num++
    }else{
    //重新回到首页
      this.num=1
      this.timeStart= 0
      this.timeEnd= pagesize
    }
     // slice方法截取内容
    this.newbookList = this.advertisingBook.slice(
        this.timeStart,
        this.timeEnd
    );
     
  },

js

.wupopup{
  position: fixed;
  left: 0px;
  top: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.21);
}
#animation {
  position: relative;
  background-color: #fff;
  border-radius: 20px;
  width: 620px;
  .bg3-box {
    background-color: #fff;
    flex-direction: column;
    padding:0px 20px 40px;
    width: 100%;
    border-radius: 20px;
    .adtitle{
     justify-content: center;
     margin-top: 50px;
     text{
        font-size: 36px;
      font-weight: bold;
      color: #333333;
      line-height: 42px;
     }
    }
    .hyp{
      width: 100%;
      justify-content: center;
      padding: 20px;
      margin-top: 50px;
      align-items: center;
      image{
        width:40px;
        margin-left: 10px;
      }
    }
  } 
    .books-box {
      margin-top: 41px;
      width: 100%;
      .list-cover {
        width: 150px;
        height: 200px;
        image {
          width: 100%;
          height: 100%;
          border-radius: 4px;
        }
      }
      .list-text {
        width: 300px;
        position: relative;
        flex-direction: column;
        flex: 1;
        margin-left: 27px;
        height: 200px;
        .headline{
          font-weight: 600;
          color: #333333;
          line-height: 52px;
          font-size: 32px;
          lines: 1;
        }
        .books-desc{    
          height: 80px;
          text{
            /* background-color: #00ffff; */
            font-size: 24px;
              font-weight: 500;
              color: #999999;
              line-height: 36px;
          }
        }
        .list-text-bottom{
          align-items: center;
          justify-content: space-between;
          margin-top: 20px;
          .bottom-left{
            text{
              font-size: 22px;
              color: #999999;
              line-height: 36px;
            }
            .shu{
                margin: 0 10px; 
              }
          }
          .bottom-right{
            width: 122px;
            height: 58px;
            background-color: #52D2BA;
            border-radius: 8px;
            justify-content: center;
            margin-right: 10px;
            text{
              color: #fff;
              font-size: 22px;
            }
          }
        } 
      }
      
    }
  .close {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    justify-content: center;
    align-items: center;
    /* background-color: #00ffff; */
    image{
      width: 22px;
      height: 22px;
    }
  }
}

css