mint ui分頁無限滑動問題

mint-ui infinite scroll 重複載入、載入無效的原因及解決方案

1.無限滾動的運用場景：一般運用在列表展示，有分頁、下拉載入更多的需求中。

2.**分析

**很簡單，實現了列表分頁，資料載入完之後顯示資料狀態

}

參考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，同時，第一次載入的資料也沒有撐滿容器。而我們的樣式設定：

? 1

.list-data

根本原因是因為，資料沒有撐滿容器就不會有滾動效果，所以就不會起作用了。

所以解決方案就是要出現滾動條！！！容器高設定的小一點，或者每頁的資料多一點。

注：1.為什麼沒有在created 裡呼叫一次getlist方法？為什麼pageindex 預設為0？

因為infinite-scroll-immediate-check預設為 true，進入頁面會直接呼叫loadmore 。

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