主要实现上拉加载更多和下拉刷新,图片懒加载等,优化列表首屏渲染性能。
-
上拉加载和下拉刷新是依赖 vant 组件库提供的 List 列表组件实现。其中,上拉加载更多原理可以通过触底检测或通过 IntersectionObserver 函数检测底部加载中提示是否在可视区,进行分页数据的请求和渲染
-
图片懒加载借助 lazy-load 插件实现,原理是只加载当前可视区域内的图片,原理也可以通过 IntersectionObserver 函数检测图片是否进入可视区,如果进入进行图片的请求和渲染
-
阅读位置的记忆 用到了keep-alive对组件进行缓存,然后keep-alive有二个钩子函数 激活 activated 失活 deactivated
- deactivated离开当前组件的时候把当前的阅读的位置存起来
- activated 重新进入的时候根据这个值滚动到对应的位置 window.scrollTo(0,y轴的位置)