無限捲動 Infinite Scrolling 在手機有限的頁面上,經由巧妙的設計後,是優化 UX 體驗一種方式。這篇筆記下使用 vue-scrollview 打造的過程和需要注意的限制。
程式碼
注意事項
1. 每個 component 中的 key 值必須要是唯一值
2. 被 <scroll-view> 涵蓋在內的 component,最外層預設是包 <span>。你可以調整其設定,改成 <div> 再藉由 CSS > 選擇器來選中它。這樣一來你會比較好調整你的 component CSS
3.slot-scope 若要避免 ESLint 報錯,可以下 slot-scope=”{}”
4. $scrollview.refresh() 可以在 nextTick 中觸發,來讓畫面渲染最新的資料
限制
1. 由於 scroll-view 套件會暫存你的滾動位置高度。若你的渲染的元件數量有進行清空操作的話,那就有一定機率無法觸發。這時你可能會需要改用原生的 JS 方法來執行。
參考資料
1. Vue.js Library!利用ScrollView再次打造infinite scrolling功能吧!(30 Days challenge-23)
2. vue-scrollview 官方文件