上個月公司給分配了一個大項目，我主要負責的是個人中心和訂單列表。現在項目結束了,回顧一下自己犯下的錯誤並且總結的經驗吧。先說一下訂單列表吧。
先上圖
其他的功能也遇到過不少的問題,但這篇博客先說一下做滾動加載的時候遇到的問題。
我最開始寫PC端比較多,現在開始寫移動端,之前PC端可以用點擊分頁搞定的事情,在移動端用戶體驗就會變得特別差,領導說要做一個滾動加載,讓我找一個組件弄,別自己寫.
但是那么多框架呢,怎么挑啊?找來找去我選了Weui,一方面是大廠的框架,肯定會長期維護,二是結構簡單,樣式簡約,當然還有一點就是使用簡單啊.
先上代碼再說廢話
使用所需的文件就不用再說了吧,很簡單.
然后這是官方代碼
組件默認滑動到距離底部50px的時候就會加載,當然這個值是可控的,但是組件並不知道我們此時此刻是否需要加載,所以只要滑動到這個范圍內,和可能會頻繁觸發,如果在這里面獲取后端數據的話,會造成長時間的卡頓.所以遇到這種情況就可以寫一個開關來控制,代碼也很簡單,官方都給我們寫好了,復制過去就好了.
然后我們就可以把我們所需要加載內容寫在這個函數里了.發一下我寫的部分
這就好了,但是獲取數據的時候有一個問題。就是在我們獲取到新數據的同時，加載后的數據也是要保留的，我們只是把新數據添加到列表中，所以就不能使用html（），而是要使用append（）
最后在判斷沒有新的數據可以加載之后就可以更換一下加載結束的話術，於此同時再關閉掉滾動加載函數就可以了。
當然在你需要再次使用滾動加載的時候可以在需要的位置加入"$(document.body).infinite()"重新啟動一下函數就好了。
搞定！！！