[TOC] ## 前言 loadmore的部分主要是mint-ui用來解決上拉以及下拉的部分，用來做加載更多數據或者刷新的部分。 其官方組件：https://mint-ui.github.io/docs/#/zh-cn2/loadmore ## 使用 其基本使用就不再贅述了，這里主要講起使用的時候遇到的問題。 ### 上拉加載無法觸發 在上拉加載的時候，其事件無法觸發，是因為其需要父容器設置為`overflow:scroll`才可以 ，這個是百度就可以查到的方案 ### 自定義的上下的html交互模板 如果你需要自定義的頭或者尾部的顯示，需要使用其插槽，slot=top或者bottom即可 。 ### 是否全部加載 top-all-loaded ,bottom-all-loaded ,控制是否全部加載完，來控制是否還支持其事件，我們在交互中也需要定義其數據加載完的操作，這個邏輯還是需要的。 ### 取消過渡狀態 你在數據請求完成之后，需要必要性的執行其onBottomLoaded()方法，否則其過渡狀態會一直存在。在官方的demo中，其是通過ref的語法得到其組件的，這也保證了我們也可以吧這個的請求完成操作可以寫到對應的異步操作函數完成之后的位置。 ### 手機模式打開 在手機端打開預覽或者chrome部分手機模擬器都可以實現其官方的效果演示的，但是在瀏覽器模式下會有點問題，問題如下 ： - 上拉不觸發 ，監聽不到手勢事件 - pc windows會自動的一直觸發上拉事件在頁面載入之后，假如你寫了api請求，其就會一直請求，直到死機；mac沒這個情況。 - 你的上拉加載的事件一定要寫對應的上拉結束的事件，如果寫的不對應，那么雖然其會消失過渡狀態，但是在之后就不會被觸發。 ### 其方法名稱使用 要注意的是其api的方法，其文檔寫的是topMethod ,但是使用的時候其實是：top-method ,其他也是。 ### 是否自動填充容器 這個屬性還是比較重要的，autofill:true，默認是true的，其作用是發現數據不夠會主動請求數據加載的方法讓其能夠填滿容器，如果你不需要這個方法，手動設置其為false ,:auto-fill='false'. ### 心心念的demo [mint-ui loadmore案例](https://codepen.io/robinson90/pen/eKwgmP) ## 其他 如果你覺得這個模塊問題太多了，那么這里推薦你另外的兩個模塊可以使用下，一個是better-scroll,一個是mescroll . - https://github.com/ustbhuangyi/better-scroll ,文檔很強，很佛系，滴滴的cube-ui的滾動就是基于這個封裝的組件。 - mescroll，官網以及demo都是非常強大的，stars數標明其也是可以依賴的。http://www.mescroll.com/