vue中使用vue-infinite-scroll

都要新建一个vue+webpack的项目，建立过程这里不再赘述。

一.vue-infinite-scroll

1. 安装

cnpm  i vue-infinite-scroll --save

2. main.js中引入

import vueiInfinite from 'vue-infinite-scroll'
Vue.use(vueiInfinite)

3. 在.vue文件中使用

<ul class="newsList" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="5">
      <li v-for="(item,index) in newsList"></li>
</ul>

<div id="loadMore" v-show="droping">加载中</div>
<div id="loadMore" v-show="noMore">没有更多的数据</div>

data () {
   return {
     busy:false,
     newsList: [],
     moreList : [],
     i : 0,
     droping : false,
     noMore : false
   }
 }

methods: {
      loadMore(){
        // console.log(111);
        var _vm = this;
        this.busy = true;
        this.droping = true;
        this.dropDown = false;
        _vm.i += 1;
        // setTimeout(() => {
          var data = {
            "pageNo": _vm.i,
            "pageSize": 10,
          };
          console.log(newsList);
          _vm.axios.post('/interaction/getNotice', data).then(function(response) {
            console.log(response.data.data.data);
            _vm.moreList = response.data.data.data;
            if(_vm.moreList.length == 0){
              _vm.noMore = true;
              _vm.droping = false;
              _vm.busy = true;
            }else{
              _vm.droping = true;
              _vm.noMore = false;
              _vm.moreList.forEach(function(item){
                _vm.newsList.push(item);
              })
            }
          }).catch(function(error) {
            console.info(error)
          });
          this.busy = false;
        // }, 1000);
      }
    },

注意：

坑一：因为我的后台数据获取比较慢，所以使用定时器会造成我的数据一遍一遍去后台获取直到获取到数据，这样会导致一次下拉会加载到好几页的数据，故将定时器注释。

坑二：在使用vue-infinite-scroll时不需要设置外部元素的宽高，而当使用mint-ui中的infinite-srcoll时必须要设置高度，才可以触发下拉加载的函数。

坑三：在使用过程中必须要将获取到的元素显示到页面上，而我刚开始只想看看获取到了没有，这样会导致不停的触发loadMore函数，获取次数太多，导致我的后台禁止我的访问。loadMore函数停止加载的条件是加载到的数据能够撑到页面底部并且滚轮没有滑动到能够触发loadMore函数的最小距离。