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

拼搏现实的明天。 2022-04-18 03:58 75阅读 0赞

参考：https://blog.csdn.net/sinat\_40257787/article/details/79582130

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

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

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

CSS代码：

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

HTML代码：

<ul
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="isMoreLoading"
        infinite-scroll-distance="10"
        :infinite-scroll-immediate-check="true"
        class="newsList">
        <li v-for="(item,index) in newsList">{
       {item}}</li>
     </ul>
     <div class="loading-box tc" v-if="isLoading">
        <mt-spinner type="snake" class="loading-more"></mt-spinner>
        <span class="loading-more-txt">加载中...</span>
     </div>
     <div class="no-more" v-if="noMore">没有更多了~</div>

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时，不断重复加载。