Weui滾動載入元件

2022-09-12 05:18:12 字數 984 閱讀 2397

上個月公司給分配了乙個大專案,我主要負責的是個人中心和訂單列表。現在專案結束了,回顧一下自己犯下的錯誤並且總結的經驗吧。先說一下訂單列表吧。

先上圖其他的功能也遇到過不少的問題,但這篇部落格先說一下做滾動載入的時候遇到的問題。

我最開始寫pc端比較多,現在開始寫移動端,之前pc端可以用點選分頁搞定的事情,在移動端使用者體驗就會變得特別差,領導說要做乙個滾動載入,讓我找乙個元件弄,別自己寫.

但是那麼多框架呢,怎麼挑啊?找來找去我選了weui,一方面是大廠的框架,肯定會長期維護,二是結構簡單,樣式簡約,當然還有一點就是使用簡單啊.

先上**再說廢話

使用所需的檔案就不用再說了吧,很簡單.

然後這是官方**

元件預設滑動到距離底部50px的時候就會載入,當然這個值是可控的,但是元件並不知道我們此時此刻是否需要載入,所以只要滑動到這個範圍內,和可能會頻繁觸發,如果在這裡面獲取後端資料的話,會造成長時間的卡頓.所以遇到這種情況就可以寫乙個開關來控制,**也很簡單,官方都給我們寫好了,複製過去就好了.

然後我們就可以把我們所需要載入內容寫在這個函式裡了.發一下我寫的部分

最後在判斷沒有新的資料可以載入之後就可以更換一下載入結束的話術,於此同時再關閉掉滾動載入函式就可以了。

當然在你需要再次使用滾動載入的時候可以在需要的位置加入"$(document.body).infinite()"重新啟動一下函式就好了。

搞定!!!

WeUI用Toast元件顯示Loading

在jquery weui的官網 沒有看到有顯示loading的用法,只有其他的用法,這裡都給大家貼出來。官網已有的用法 toast 取消操作 cancel toast 禁止操作 forbidden toast 純文字 text 第二個引數可以是時間,單位毫秒 toast 訊息 20000 官網沒有提...

ListView滾動翻頁 滾動載入

關鍵 1.滾動載入 listview.setonscrolllistener new onscrolllistener override public voidonscroll abslistview view,int firstvisibleitem,intvisibleitemcount,int...

JQUERY滾動載入

document height 整個網頁的高度 window height 瀏覽器可視視窗的高度 window scrolltop 瀏覽器可視視窗頂端距離網頁頂端的高度 垂直偏移 用一句話理解就是 當網頁滾動條拉到最低端時,document height window height window s...