Mint-ui infinite scroll 无限加载爬坑之路

参考：https://blog.csdn.net/sinat_40257787/article/details/79582130

问题一：下拉不会触发loadMore事件

解决：我们的ul或者设置滚动的元素必须设置高度和溢出滚动的属性

因为我的接口没有分页所以用slice模拟数据分页加载

CSS代码：

.newsList {
        max-height: 100vh;//与屏幕一样高度
        overflow-y: auto;
 ｝

HTML代码：

 

    
{{item}}
 
 

    
    加载中...
 
 
没有更多了~

JS代码：

data() {
    return {
      newsList : [],
      moreList : [],
      i : 0,
      isMoreLoading: false, // 加载更多中
      isLoading : false,
      noMore : false
    }
  }

开始的时候加载前五条数据

created() {
    var _vm = this; 
    let i = 0;
    _vm.axios.post().then(function(response) {
      console.log(response.data);
      _vm.newsList = response.data.slice(i * 5 , (i + 1) * 5);
    }).catch(function(error) {
      console.info(error)
    });
  }

后面每次下拉触发loadMore事件，并再次加载五条数据，直到所有数据加载完毕

loadMore() {
      this.isMoreLoading = true;
      this.isLoading = true;
      this.noMore = false;
      setTimeout(() => {
        var _vm = this;
        _vm.axios.post().then(function(response) {
          console.log(response.data);
          _vm.i ++;
          _vm.moreList = response.data.slice(_vm.i * 5 , (_vm.i + 1) * 5);
          if(_vm.moreList.length == 0){
            _vm.noMore = true;
            _vm.isLoading = false;
          }else{
            _vm.isLoading = false;
            _vm.moreList.forEach(function(item){
              _vm.newsList.push(item);
            })
          }
        }).catch(function(error) {
          console.info(error)
        });
        this.noMore = false;
        this.isMoreLoading = false;
      }, 1000);
    }

问题二：页面没有任何操作，不断发送请求进行加载

解决：数据请求完成之后，this.busy = false放在ajax请求外面；这样可以避免，当请求数据为0时，不断重复加载。