mint-ui loadmore模塊採坑指南

前言

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案例

其餘

若是你以爲這個模塊問題太多了，那麼這裏推薦你另外的兩個模塊能夠使用下，一個是better-scroll,一個是mescroll .

• https://github.com/ustbhuangyi/better-scroll ,文檔很強，很佛系，滴滴的cube-ui的滾動就是基於這個封裝的組件。
• mescroll，官網以及demo都是很是強大的，stars數標明其也是能夠依賴的。http://www.mescroll.com/