引入相關依賴包
<script src="lib/mui/js/mui.js"></script>
HTML結構
初始化代碼
上拉和下拉配置都在里面為什么每次返回時要重新加載頁面,都有詳細注釋,初始化完成就可以上拉和下拉了,這里有兩個必須的回調方法,用來處理具體業務邏輯,每個人具體需求不一樣,這里就以自己的一個需求作為示例:
上拉和下拉配置都在里面,都有詳細注釋,初始化完成就可以上拉和下拉了,這里有兩個必須的回調方法,用來處理具體業務邏輯為什么每次返回時要重新加載頁面,每個人具體需求不一樣,這里就以自己的一個需求作為示例:
說明一下,我這里是重新刷新一頁的數據,也可以刷新已經加載出來的數據,數據獲取完成后結束刷新就行了。另外這個返回的是子頁面的整個HTML標簽代碼,所以就直接到對應的ul下面就可以了,不用使用模板引擎拼接了。
加載更多業務處理方法:
如果拉完已經是最后一頁,上拉就會關閉,下面的提示文字會變成類似'沒有更多數據'這樣的,使用起來還是挺簡單的。
把頁面放在微信瀏覽器的時候,測試到一個現象,從列表頁面進入詳情然后再返回的時候,頁面會自動刷新,這個時候需要重置上拉,不然就拉不動了,當然其它情況,比如有tab切換的時候也需要重置上拉刷新:
關鍵代碼就是有注釋那一句,這里設置了一個延遲,不然刷新的時候會觸發兩次上拉,這可能是mui的一個bug,加上這個延遲反復測試過就沒這個現象了。
上拉加載效果: