使用vue.js開發移動端的活動頁面時,有時候會出現因為請求的數據沒有返回而使得當前活動頁結構混亂或者不美觀,這個時候可以考慮使用pace.js,通過設置參數值,在ajax全部請求結束之前顯示loading圖或其他樣式,用戶體驗會上升很多。
那么如何設置才能等監聽完所有的ajax請求結束之后才顯示渲染好的頁面呢?具體請參考pace.js http://github.hubspot.com/pace/docs/welcome/
window.paceOptions = {
ajax: true,
eventLag: false,
elements: false
}
這里只說下踩過的坑:在window.paceOption{ } 里設置ajax為true之后,通過charles里的小烏龜調成較慢網速,會發現使用pace.js配置的loading圖或文字等樣式並沒有等數據全部請求完成之后消失,這樣並沒有達到我們想要的效果,通過查閱資料,會發現是pace.js在一些版本里默認ajax只跟蹤GET方法的問題,需要在pace.js引入前添加代碼:
window.paceOptions = {
ajax: {
trackMethods: ['GET', 'POST']
}
}
或者把post請求改成get.