vue3+ts封装一个uniapp的自动滚动列表,实现看板效果

电视机上要以列表展示数据,并且数据会实时更新,电视机不能点击,所以考虑自动播放的一个效果。展示方案有两种:1、列表上下自动滚动实现轮播效果。(此时具体滚动的高度由用户自己决定,每次滚动几条数据)2、列表以“页”的形式做成轮播图的翻页效果。

由于项目的电视机是有任务提示作用的,最后考虑做成第一种方案,用户能更清晰了解任务安排和数据的更新。

搜索之后了解到vue-seamless-scroll支持列表的自动滚动效果,但是一般是vue2使用,所以考虑自己封装一个组件。 一开始是使用uni-app的组件uni-table进行封装,然后发现其实有很多注意事项,可能需要对uni-table进行深度改造,最后决定自己使用原生table来封装。

uni-table的第一次封装如下


  
  
  
  

最后封装代码如下:(第一次自己封装组件,可能有很多没考虑进去并且可以优化的地方,只是分享一个简单的半成品)


  
  
  
  
  

封装过程中发现因为表头和内容是两个分开的table,所以会存在表头和表格不能上下对齐的情况,这时候考虑代码中的updateHeaderWidth函数,在组件挂载完的时候将头部表格和内容表格的宽度一一对应。

通过 headers: any[]接收父组件传的表头展示数据。
data: any[]接收父组件传的表格内容数据
都为必传内容,但是也有默认赋值。
通过
headerFontSize?: Number,表头的文字大小(一般表头会更醒目一些)
bodyFontSize?: Number,表格的文字大小
headerHeight?: Number,表头高度(默认根据传值让表头内容在单元格中居中)
bodyHeight?: Number,表格高度
intervalTime?: Number滚动间隙(多少毫秒滚动一次)

组件挂载完的时候,通过startScroll来开始滚动,组件默认将bodyHeight表格高度设置为滚动速度scrollSpeed,实现每次滚动底部刷新出最新一条数据的效果。

对于数据的刷新,本来计划新数据和旧数据进行一个简单的diff比较差异,然后将没有的数据加入到旧数据的最后面,保存更新数据前的滚动高度scrollTop,更新数据之后继续从该高度开始滚动。但是后面又意识到不仅仅有增加,还会有删除,这个时候滚动高度scrollTop不适配了,数据也不一定会接着更新数据前的内容展示。

这个时候考虑先将旧数据中在新数据中仍存在的值过滤出来,然后将没有的数据加入到旧数据的最前面(数据data要求是一个数组,因此加数据的时候采用unshift),每次更新数据都将滚动高度scrollTop置0开始重新滚动,用户每次都会看到最新的数据。

后面发现更新数据后的总的滚动高度scrollHeight 获取不正常,滚动会停止,以为是数据更新之后还没重新渲染完就获取了导致的,但是在onUpdated中获取的也是同样的值,后面排查也没发现具体原因,因此直接写死代码,让出现异常的时候判断出来重新将滚动高度scrollTop置0。

监听数据变化完之后,表格会重新渲染,此时表头由于数据没有更新会保持原宽度不变,所以在onUpdated中再次调用updateHeaderWidth函数并且重新启动自动滚动startScroll

考虑到对于表格的展示,用户可能有不同的要求,比如时间的字段实际太长了,需要将字体调小来实现一行展示。因此提供computedStyle方法来实现动态style。此时的传值会在headers中,因为data实际都是接口获取值,不会说每个数据字段都告诉你要什么样式。

调用代码如下:


  

                    
                    

你可能感兴趣的:(uni-app,vue.js,typescript,前端)