Vue =＞ Vue+Element-ui＜InfiniteScroll 无限滚动应用＞

0.需求分析

在产品给我提了一个需求的时候，不想要手动点击分页 那么就能想到滚动刷新请求，正好element是有这个应用的，拿来吧你！

1.页面布局

<template>
  <div id="box">
    <div class="box" v-infinite-scroll="load" infinite-scroll-disabled="disabled" >
        <ul class="list" >
          <li v-for="(i,index) in list" class="list-item" :key="index">{{ i }}</li>
        </ul>
        <p v-if="loading" style="margin-top:10px;" class="loading">
          <span></span>
        </p>
        <p v-if="noMore" style="margin-top:10px;font-size:13px;color:#ccc">没有更多了</p>
    </div>
  </div>
</template>

2.数据处理和样式动画效果

<script>
exportdefault {
  data() {
    return {
      count: 0,//起始页数值为0
      loading:false,
      totalPages:"",//取后端返回内容的总页数
      list: []//后端返回的数组
    };
  },
  computed: {
    noMore() {
      //当起始页数大于总页数时停止加载
      return this.count >=this.totalPages - 1;
    },
    disabled() {
      return this.loading ||this.noMore;
    }
  },
  created() {
    this.getMessage();
  },
  methods: {
    load() {
      //滑到底部时进行加载
      this.loading =true;
      setTimeout(() => {
        this.count += 1;//页数+1
        this.getMessage();//调用接口，此时页数+1，查询下一页数据
      }, 2000);
    },
    getMessage() {
      let params = {
        pageNumber:this.count,
        pageSize: 10//每页查询条数
      };
      this.$axios
        .post(
          "https://接口",
          params
        )
        .then(res => {
          console.log(res);
          this.list =this.list.concat(res.data.body.content);//因为每次后端返回的都是数组，所以这边把数组拼接到一起
          this.totalPages = res.data.body.totalPages;
          this.loading =false;
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
 
<style scoped>
#box{
    width: 100%;
  height: 100%;
  position: absolute;
  overflow-y: auto;
}
.box {
  width: 100%;
   margin:  0 auto;
}
.list {
  padding: 0;
  font-size: 14px;
}
.list-item {
  width: 100%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  list-style: none;
  padding: 0 1rem;
  box-sizing: border-box;
  height: 70px;
  line-height: 70px;
  border-bottom: 1px solid #e7e7e7;
}
.loading span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #409eff;
  border-left: transparent;
  animation: zhuan 0.5s linear infinite;
  border-radius: 50%;
}
@keyframes zhuan {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

3.普通展示状态

4.加载中展示状态