vue手机端，纯前端实现滚动懒加载，分页加载数据

最近做的一个项目，后端的接口由于某种的原因，一次性把所有的列表数据全部返回给前端了。所以需要前端做个滚动懒加载的功能，并把数据做个拦截处理。效果如下图所示：


因为我的框架用得是：http://mint-ui.github.io/docs/#/zh-cn2/infinite-scroll

html部分

 <div
   class="progress_list"
   v-infinite-scroll="loadMore"
   infinite-scroll-disabled="loading"
   infinite-scroll-distance="10"
 >
   <div class="progress_item" v-for="(item, index) in list" :key="index">
     <div class="progress_title">{
    
    {
    
    item.projectName}}</div>
     <div class="progress_box">
       <div class="progress_bar">
         <div class="progress_value">{
    
    {
    
    `${
      
      item.currVal}%`}}</div>
         <div class="progress_line" :style="{left: item.totalVal + '%'}"></div>
       </div>
       <div class="progress_text" v-if="item.status === '进度落后'">
         <img src="@/assets/images/icon_down.png" alt />
         <span style="color:#FF371F;">{
    
    {
    
    item.status}}</span>
       </div>
       <div class="progress_text" v-if="item.status === '进度刚好'">
         <img src="@/assets/images/icon_right.png" alt />
         <span style="color:#2D6EFB;">{
    
    {
    
    item.status}}</span>
       </div>
       <div class="progress_text" v-if="item.status === '进度超前'">
         <img src="@/assets/images/icon_up.png" alt />
         <span style="color:#38C8B5;">{
    
    {
    
    item.status}}</span>
       </div>
     </div>
   </div>
   <div class="progress_loading" v-if="loading">加载中...</div>
   <div class="progress_loading" v-if="noMore">无更多数据</div>
 </div>

data() {
    
    
  return {
    
     
    page: 1, //当前页数
    pageSize: 10, //每页10条
    loading: false,
    noMore: false, 
    list: [], //列表展示数据 
  };
},
mounted() {
    
    
  this.setList();
},
methods: {
    
    
  // 滚动加载
  loadMore() {
    
     
    this.noMore = false;
    if (this.list.length === this.demandData.items.length) {
    
    
      this.noMore = true;
      return false;
    }
    this.loading = true;
    setTimeout(() => {
    
    
      this.page++;
      this.setList();
      this.loading = false;
    }, 1000);
  },
  // 计算滚动加载的数据
  setList() {
    
    
    let begin = (this.page - 1) * this.pageSize;
    let end = this.page * this.pageSize;
    let data = [];
    data = [...this.list, ...this.demandData.items.slice(begin, end)];
    this.list = data;
  },
}

这样，一个简单的手机端滚动加载列表数据就完成了。前端把返回的数据利用slice切割出来，这样浏览器就不用一次性渲染太多的dom结构，能提升用户体验。