mint-ui Infinite scroll 重複加載、加載無效的緣由及解決方案

1.無限滾動的運用場景：

通常運用在列表展現，有分頁、下拉加載更多的需求中。

2.代碼分析

代碼很簡單，實現了列表分頁，數據加載完以後顯示數據狀態

<template>
 <div class="list-data" 
    v-infinite-scroll="loadMore" 
    infinite-scroll-disabled="loading"     
    infinite-scroll-distance="10">
      <equipment-list :list="list"></equipment-list>
      <div class="loading" v-if="loading">
         <span id="load-text">{{loadText}}</span>
      </div>
 </div>
</template>
<script>
    import { findPage } from '@/api/api'
    import EquipmentList from 'common/list/EquipmentList.vue'
    export default {
        data(){
            return {
               loading:false,
               loadText:'正在加載...',
               list: [],
               param: {
                 pageIndex: 0,
                 pageSize: 10
               }
         },
         components:{
            EquipmentList
         },
         methods: {
            getList(callBack){
               findPage(this.param).then(response => {
                  if(response.ret){
                    let data = response.datas
                    if(!data){data = []}

                    // 上次list的長度
                    let len = this.list.length
         
                    // 拼接數據
                    this.list = this.list.concat(data)

                    if (data && data.length == 0 && !len) {
                      this.loadText = '沒有找到相關數據'
                    } else if (data && data.length < 10) {
                      this.loadText = '暫無更多數據'
                    } else {
                      this.loading = false
                    }

                    callBack && callBack()
                  }
                },reject => {})
            },
            loadMore() {
               this.loading = true
               this.param.pageIndex += 1
               this.getList()
            }
         }
     }
</script>
<style>
  .list-data{
    height: 100%;
    overflow-y: auto;
  }
</style>

 

參考mint-ui官網介紹

1.爲HTML元素添加v-infinite-scroll指令便可使用無限滾動。

2.滾動該元素，當其底部與被滾動元素底部的距離小於給定的閾值（經過infinite-scroll-distance設置）時，綁定到 v-infinite-scroll 指令的方法就會被觸發。

3.infinite-scroll-disabled若爲真，則無限滾動不會被觸發，默認爲false。

4.infinite-scroll-immediate-check若爲真，則指令被綁定到元素上後會當即檢查是否須要執行加載方法。在初始狀態下內容有可能撐不滿容器時十分有用。默認爲true。

 

可是，3和4實際效果卻和官網描述有出入，實際效果：實際效果：實際效果：

1.爲HTML元素添加 v-infinite-scroll 指令便可使用無限滾動。

2.滾動該元素，當其底部與被滾動元素底部的距離小於給定的閾值（經過infinite-scroll-distance設置）時，綁定到 v-infinite-scroll 指令的方法就會被觸發。

3.infinite-scroll-disabled 若爲真，若是上次加載的數據沒有撐滿容器，則當即再次執行綁定到 v-infinite-scroll 指令的方法（loadMore），直到數據撐滿容器爲止。在初始狀態下內容有可能撐不滿容器時十分有用，默認爲false。

4.infinite-scroll-immediate-check，若爲真 則指令被綁定到元素上後會當即執行加載方法（loadMore），默認爲true。

 

填坑

1.重複加載。初次進入列表頁，會加載兩次或者屢次數據

形成重複加載的緣由，罪魁禍首是infinite-scroll-disabled，在 loadMore 方法裏 有一句 this.loading = true，把infinite-scroll-disabled的值設置爲了true，

它的做用就是，當你進入頁面是，會檢查若是第一次請求的數據沒有撐滿你的容器（list-data），就會當即再次執行v-infinite-scroll 綁定的方法（loadMore），第二次沒有撐滿，會執行第三次。。。。。。

2.滾動時，不起做用

這種狀況，就是在loadMore方法裏沒有寫this.loading = true，同時，第一次加載的數據也沒有撐滿容器。而咱們的樣式設置：

.list-data{
    height: 100%;
    overflow-y: auto;
}

根本緣由是由於，數據沒有撐滿容器就不會有滾動效果，因此就不會起做用了。

因此解決方案 就是要出現滾動條 ！！！ 容器高設置的小一點，或者每頁的數據多一點。

 

注：

1.爲何沒有在created 裏調用一次getlist方法？爲何pageIndex 默認爲0？

由於infinite-scroll-immediate-check默認爲 true，進入頁面會直接調用loadMore 。

2.容器的樣式須要設置height和 容許滾動overflow-y:auto;