网站开发河南,wordpress 邮箱激活,seo佛山,学校网页网站模板免费下载文章目录 安装 vue-virtual-scroller引入#x1f4e2;注意事项使用基础使用上拉加载下拉刷新 移动端在渲染长列表时 大量dom节点的渲染和重绘重排会导致页面卡顿、滚动不流畅、设备耗电加快、影响移动设备电池寿命等性能问题
这里分享使用【虚拟滚动】方案进行长列表优化注意事项使用基础使用上拉加载下拉刷新 移动端在渲染长列表时 大量dom节点的渲染和重绘重排会导致页面卡顿、滚动不流畅、设备耗电加快、影响移动设备电池寿命等性能问题
这里分享使用【虚拟滚动】方案进行长列表优化以Vue3为例推荐使用 vue-virtual-scroller
先列举 vue-virtual-scroller 相关官方文档帮助学习
官方文档Live demoLive demo 源码Video demo
安装 vue-virtual-scroller
npm install --save vue-virtual-scrollernextyarn add vue-virtual-scrollernext引入
安装所有组件
import VueVirtualScroller from vue-virtual-scrollerapp.use(VueVirtualScroller)按需引入组件
import { RecycleScroller } from vue-virtual-scrollerapp.component(RecycleScroller, RecycleScroller)引入样式文件
import vue-virtual-scroller/dist/vue-virtual-scroller.css注意事项
整个列表的高度要写死不然会将整改列表作为可视区域会出现渲染全部数据而不是只渲染可视区域的问题 这里推荐使用 flex: 1; 实现比 height: calc(100vh - 30vw); 更优雅、更易维护使用 -webkit-overflow-scrolling: touch; 开启硬件加速ios高版本自带使用 overscroll-behavior: none; 禁用iOS回弹效果
使用
使用 DynamicScroller 组件渲染不确定高度的组件
基础使用
div classcontent-wrapDynamicScroller:itemsdataList:min-item-size160key-fieldidclassvirtual-scrollertemplate #default{ item, index, active }DynamicScrollerItem:itemitem:activeactive:size-dependencies[item.status, item.type]:data-indexindexclassvirtual-scroller-item!-- 渲染组件 --TaskItem :dataitem //DynamicScrollerItem/template/DynamicScroller
/div.icc__container {height: 100vh;display: flex;flex-direction: column;box-sizing: border-box;.icc__content-wrap {flex: 1;.virtual-scroller {/* 开启硬件加速 -webkit-overflow-scrolling: touch; ios高版本自带 */-webkit-overflow-scrolling: touch;/* 禁用回弹效果 */overscroll-behavior: none;height: 100%;}}
}上拉加载
vant List DynamicScroller 会导致连续触发 vant List load 事件所以只能手写上拉加载
监听 DynamicScroller 滚动事件如果当前距离顶部的值加上可视区域的值大于等于总高度则滚动条触底加载更多使用 DynamicScroller after 插槽定义加载中、加载完成、加载失败等状态
div classcontent-wrapDynamicScroller:itemsdataList:min-item-size160key-fieldidclassvirtual-scrollerscrollhandleDynamicScrollerScrolltemplate #default{ item, index, active }DynamicScrollerItem:itemitem:activeactive:size-dependencies[item.status, item.type]:data-indexindexclassvirtual-scroller-item!-- 渲染组件 --TaskItem :dataitem //DynamicScrollerItem/templatetemplate #afterdiv classaftervan-loading v-showloadMoreLoading加载中.../van-loadingspan v-showfinished没有更多了/spanspan v-showloadError clickhandleLoadMore请求失败点击重新加载/span/div/template/DynamicScroller
/div// 上拉loading
const loadMoreLoading refboolean(false)
// 没有更多数据了
const finished refboolean(false)
// 加载失败
const loadError refboolean(false)// 实现上拉加载
const handleDynamicScrollerScroll (e: Event) {// 距顶部const scrollTop (e.target as HTMLDivElement)?.scrollTop || 0// 可视区高度const clientHeight (e.target as HTMLDivElement).clientHeight || 0// 滚动条总高度const scrollHeight (e.target as HTMLDivElement)?.scrollHeight || 0// 触底距离const offset 300// 如果当前距离顶部的值加上可视区域的值大于等于总高度则滚动条触底if (scrollTop clientHeight scrollHeight - offset) {if (!loadMoreLoading.value !finished.value !loadError.value) {console.log(滚动到底部了)loadMoreLoading.value truehandleLoadMore()}}
}下拉刷新
使用 vant PullRefresh实现下拉刷新
如果直接用 vant PullRefresh 包裹虚拟滚动会导致无法向下滑动任何位置下拉都会触发下拉刷新。
解决方案
1. vant PullRefresh 中有 disabled 选项可以禁用下拉刷新默认设置为 false
2. 监听滚动条滚动事件中的 scrollTop
3. 如果 scrollTop 小于4则将 disabled 变为 false
4. 否则将 disabled 变为 truetemplatediv classcontainervan-pull-refreshv-modelrefreshLoadingrefreshhandlerefresh:disableddisabledPullRefreshclasscontent-wraptemplate v-ifdataList.length 0DynamicScroller:itemsdataList:min-item-size160key-fieldidclassvirtual-scrolleridvirtual-scrollerscrollhandleDynamicScrollerScrolltemplate #default{ item, index, active }DynamicScrollerItem:itemitem:activeactive:size-dependencies[item.status, item.type]:data-indexindexclassvirtual-scroller-item!-- 渲染组件 --TaskItem :dataitem //DynamicScrollerItem/templatetemplate #afterdiv classaftervan-loading v-showloadMoreLoading加载中.../van-loadingspan v-showfinished没有更多了/spanspan v-showloadError clickhandleLoadMore请求失败点击重新加载/span/div/template/DynamicScroller/templatevan-emptyv-elseimage./no_data.pngdescription暂无匹配数据:image-size[60vw, auto]classh-80vh//van-pull-refresh/divvan-back-top target#virtual-scroller /
/template// 下拉loading
const refreshLoading refboolean(false)
// 禁用下拉刷新
const disabledPullRefresh ref(false)
// 上拉loading
const loadMoreLoading refboolean(false)
// 没有更多数据了
const finished refboolean(false)
// 加载失败
const loadError refboolean(false)
// 实现上拉加载
const handleDynamicScrollerScroll (e: Event) {// 距顶部const scrollTop (e.target as HTMLDivElement)?.scrollTop || 0// 可视区高度const clientHeight (e.target as HTMLDivElement).clientHeight// 滚动条总高度const scrollHeight (e.target as HTMLDivElement)?.scrollHeightconst offset 300// 如果直接用 vant PullRefresh 包裹虚拟滚动会导致无法向下滑动任何位置下拉都会触发下拉刷新。// 控制是否开启下拉刷新if (scrollTop 4) {disabledPullRefresh.value false} else {disabledPullRefresh.value true}// 如果当前距离顶部的值加上可视区域的值大于等于总高度则滚动条触底if (scrollTop clientHeight scrollHeight - offset) {if (!loadMoreLoading.value !finished.value !loadError.value) {console.log(滚动到底部了)loadMoreLoading.value truehandleLoadMore()}}
}兄弟们上面的代码在项目中踩坑实测过了
源码就不贴了
