每 日 一 图
One Shot
Get Bink20d，适马24-70mm1: 2.8exdg微距(24mm端)，F9.5，1/30秒，cindig d
诗意
浅滩化石
被夕阳拖着
回到独角鲸的故乡。
组件复用并动态渲染
我在最近的工作中，就遇到了这样一个Vue渲染数万张数据渲染列表的需求。参考网上的一些算法，自己试着包了一个，性能优化最多。我自我感觉良好，所以我想与你分享。如果各位前端大佬有什么好的想法和建议，可以留言。代码注释已经非常详细了。[窃笑]
我们先来看一个视频，看看它的表现力如何：
模板\ n div class=' list-scroller ' ref=' list scroller ' @ scroll=' update 'style=' { ' min height '` $ { min height } px ` } ' \ n div \ n class=' list-scroller-holder ' \ n:style=' { '总高度} px ` } ' \ n div \ n class=' list-scroller-wrapper 'class=' { visible:visible } ' \ n:style=' { transform:` translate y($ { translate } px \ n从@/utils '导入{节流} \ n/* \ n参数说明类型必填默认值\ n列表需要渲染的数据Array是-\ n密钥\ t数组的唯一标识字段，可以很大程度提升渲染性能字符串\ t是-\ n最高\ t可视区域最小高度数量\ t否\ t500 */\ n导出默认名称：' ListScroller '\ n属性：{列表：{ //需要渲染的数据 type: Array，\ n default:()={ \ n return[]； }、 require: true }、 itemKey: { //数组的唯一标识字段，可以很大程度提升性能类型：字符串，默认值：” id “，要求：true }，最小高度：{ //最小可视区域高度类型：数字，默认值：300 } }，设置(道具，CTX){ \ n const visible=ref(false)//初始化完成之前隐藏\ n const show list=ref(props。列表。长度？[props.list[0]]:[]) //当前渲染的数据 const translate=ref(0) //当前渲染数据区域的Y轴偏移数，需要通过偏移数使滚动过程中渲染数据一直出现在可视区域内\ n const list scroller=ref(null)\ n const item height=ref(0)//单个列表的高度 const viewHeight=ref(0) //可视区域高度\ n const total height=computed(()={ \ n return item height。价值*道具。列表。长度；\ n })\ n \ n在已安装的(()={ \ n initScroller()\ n窗口上。on resize=initScroller \ n \ n })\ n函数initScroller(){ \ n查看高度。值=列表滚动器。价值。偏移高度\ n let item=list scroller。价值。查询选择器(.list-scroller-item ')\ n项目高度。值=项目项目。偏移高度| | 0 \ n update()\ n//当传入的数据发生变化时，需要重新渲染数据 watch(()=props.list，update)\ n可见。value=true \ n } \ n \ n//滚动时采用截留函数提高滚动的性能\ n const update=throttle(()={ \ n//更新当前显示的数组数据\ n让scroll top=listscroller。价值。滚动顶部；\ n让view num=math。天花板(视图高度。值/项目高度。值)；//可视区域可显示的最多条数\ n让show start=math。地板(滚动顶部/项目高度。值)；//可视区域显示的第一数据下标 //利用VUE中差速器算法的复用机制，我们可以截取可视区域的上一屏第一条至下一屏最后一条 //这样滚动时可以快速复用，避免滚动后再渲染数字正射影像图出现短暂空白。n let start=showStart – viewNum 0？显示开始视图编号：0；//上一屏第一条下标\ n let end=show start(2 * view num)props。列表。长度？show start(2 * viewNum):道具。列表。长度；//下一屏最后一条下标\ n显示列表。价值=道具。列表。切片(开始，结束)；\ n翻译。值=开始*项目高度。价值； }，100) return { listScroller， visible， viewHeight， totalHeight， showList， translate，\ n update \ n } \ n } \ n } \ n/script \ n style lang=' less ' scoped \ n . list-scroller { \ n height:100%；位置：相对的；溢出：自动；}.list-scroller-holder .列表滚动包装器{位置：绝对；顶部：0; width='360px 'height='auto' /