vue 1000条数据 前端做分页

某些需求后台会返回大量数据,可能会上万条,如果前端一次渲染完毕 性能体验会非常不好,这时候就需要前端来做分页了, 代码如下:

html

<ul>
  <li :id="i+1" v-for="(item,i) in data" :key="i">
     <div>{{item.stock_name}}<p>{{item.stock_code}}</p></div>
     <div>{{item.new_price}}</div>
     <div>{{item.close_price}} <p>1111111</p></div>
     <div>{{item.rate}}</div>
     <div>{{item.t5}}</div>
   </li>
   <div class="btn">{{btnText}}</div>
 </ul>

js

export default {
  data() {
    return {
      btnText: '加载中...',
      data:[],
      dataList:[],
      curPage:1,//当前页码
      pageSize:15,//一页显示数据条数
      prevY:0,//页面滚出去的距离
      times: null,
    }
  },
  mounted(){
    window.addEventListener('scroll', this.handleScroll)//绑定滚动事件
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)//移出滚动事件
  },
  created(){
    for(var i=0; i<1000; i++ ){
      this.dataList.push({stock_name:'云南白药',stock_code:'zs00000'+i,new_price:'28.00',close_price:'18.00',rate:10.23,t5:'2.23%'})
    }
   this.data = this.dataList.slice(0,this.pageSize)
  },
  methods:{
    handleScroll(){
      if(this.curPage*this.pageSize >= this.dataList.length){//如果数据加载完毕 
        return this.btnText = '没有更多了'
      }
      if(window.scrollY > this.prevY) {  // 判断用户是否向下滚动
        this.prevY = window.scrollY
        var num = this.curPage*this.pageSize
        // console.log(document.getElementById(num).getBoundingClientRect().top)
        if(document.getElementById(num).getBoundingClientRect().top <= window.innerHeight) {//判断当前页的最后一条数据是否滚入屏幕内
          
          if(this.times){//过滤掉多余的定时器
            return
          }
          this.times = setTimeout( () => {//加载下一页内容
            this.curPage++
            this.data = this.dataList.slice(0,this.curPage*this.pageSize)
            console.log(this.curPage)
            this.times = null
          },1000)
        }
      }
    }
  },
}

css就不上了,