[筆記] Vue ScrollView 來打造無限捲動 Infinite Scroll

無限捲動 Infinite Scrolling 在手機有限的頁面上,經由巧妙的設計後,是優化 UX 體驗一種方式。這篇筆記下使用 vue-scrollview 打造的過程和需要注意的限制。
vue.js logo vue


程式碼

注意事項

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 官方文件

按讚加入粉絲團

延伸閱讀