使用MUI框架模擬手機端的下拉重新整理和上拉載入功能

2022-09-28 09:54:09 字數 1012 閱讀 9634

mui框架基於htm5plus的xmlhttprequest,封裝了常用的ajax函式,支援get、post請求方式,支援返回json、xml、html、text、script資料型別; 本著極簡的設計原則,mui提供了mui.ajax方法,並在mui.ajax方法基礎上,進一步簡化出最常用的mui.get()、mui.getjson()、mui.post()三個方法。

想更多的了解這個框架:

那麼如何實現下拉重新整理,上拉載入的功能呢?

首先需要乙個容器:

">

程式設計客棧gt;

然後進行初始化操作,通過mui.init方法中pullrefresh引數配置上拉載入各項引數:

mui.init(

}});

這裡重點關注callbaraixzihack引數項,為必選內容,裡邊寫重新整理函式,根據具體的業務來寫,在實際專案中,通常是通過ajax從伺服器獲取資料,然後進行html的動態拼接,形成資料項。

下面舉乙個很簡單的例子:(實現上拉載入的功能)

容器:   

一會要將資料放到 id=「testul」的ul標籤下,id當然隨便取

呼叫mui.init方法:

callback引數中,寫的是載入函式,每次載入,動態生成乙個li標籤,用當前時間作為測試資料,貼到id=testul的ul標籤之下。

這裡注意callback中的function最後的 this.endpulluptorefresh(false); 表示結束載入,引數可選true或false,true表示結束載入,false繼續載入,在實際專案應用中,通常要根據伺服器回傳的資料量做一下判斷。

over!! 這樣每次上拉,都會載入一條當前的時間。

總結以上所述是小編給大家介紹的使用mui框架模擬手機端的下拉重新整理和上拉載入功能,希望對大家有所幫助,如果大家有任何araixzih疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對我們**的支援!

本文標題: 使用mui框架模擬手機端的下拉重新整理和上拉載入功能

本文位址: /ruanjian/j**a/202538.html

MUI下拉載入安卓手機無效的解決方法

本人小菜鳥乙個,在做mui專案的時候,要加入上拉下拉翻頁的功能,看了一下文件,感覺很簡單的配置和呼叫方法 但是 寫出來之後ios沒有任何問題,但是在安卓上面執行,下拉載入沒有反應,這讓我一臉懵逼。在苦尋之後終於找到了大神。解決方法 第一步 在html中定義全域性變數 var h5pulldown t...

CURL模擬手機端的HTTPS請求

curl模擬手機端需要設定使用者 為手機端的,https請求需要ssl證書或禁止驗證證書 curl curl init curl 初始化 curl setopt curl curlopt url url curl setopt curl curlopt ssl verifypeer false 禁止...

移動端使用下拉載入的簡單方法

var io new intersectionobserver callback,option 函式的配置 var io new intersectionobserver entries 開始觀察 io.observe document.getelementbyid example 停止觀察 io....