这个进度条怎么实现呀，前端基础太差😭😭-CSDN社区

xsc-夏 2021-07-27 19:35:44

这个进度条怎么实现呀，前端基础太差😭😭

...全文

1353 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

前端薛小帅 2021-07-30

打赏
举报

回复

推荐一个前端群，没事来水水，说不定能学到不一样的技术 1063233592 😄

Lotus domino BS 多附件上传例子 Lotus domino jquery附件上传经典完整例子，全部源码，使用在多个项目中，请放心下载。

前言大家好，我是零一。最近我准备在组里进行代码串讲，所以我梳理了下项目之前的业务代码。在梳理的过程中，我看到了有个进度条组件写的非常好，这又想起我刚开始学前端时写的进度条的代码，跟这个比起来真的差距太大了（大部分的初学者应该都想不到，而且我第一次家实习公司带我的mentor亦是如此）。因此，我想给大家分享一下这个思路极好的进度条组件，同时它也存在非常严重的性能问题，本文末尾也会讲解一下问题所在以及优化方式 进度条的应用场景一般进度条组件都出现在类似抖音播放视频的这样场景中，如图中底部的箭头所示：进

Vue项目实现文件下载进度条 需求场景大文件下载，花费的时间比较长，没有任何提示，用户体验很差。需要优化，提示文件在下载中，并且显示进度百分比。实现步骤 1.下载文件的方法，需要拿到当前进度。 2.每一次下载进度更新，需要监听变化，并且刷新页面显示的数据。 3.封装一个文件下载进度的组件。下面一步步来实现：1.获取文件下载进度 axios作为一个易用、简洁且高效的http库，有没有获取下载进度的方法呢？打开axios官网查看一下，文档中有一个对原生进度事件的处理的方法 onDow

上一集我们说到了进度条的实现，之后就鸽了很久，终于到写这一篇的时候了，说到底一方面是自己太忙，第二方面是自己太懒了。在图片未上传完成之前不可能拿到上传后返回的uri通过线上地址渲染，同时服务端图片预览虽然也可以实现，但比较麻烦，所以，这里的预览图，其实是拿到本地图片资源后，转换为uri，在浏览器端直接使用。如图在上传进度条出现的时候，图片已经出现了，它从何而来呢？我们可以使用URL.create

来简单演示一下这个进度条的样子为什么说这种写法不太好呢？因为我们是通过定时器来快速递增变量progress以此来实现进度增加的，变量每次改变都会驱动视图重新计算渲染，这必然是性能很差的（说实话，我在体验这个demo的时候，肉眼可见的小卡顿）除此之外呢？其实还有一个造成卡顿的原因，你们不妨猜猜看，我们放到最后一起讲，想知道答案的小伙伴可以直接滑到下面推荐的写法这里推荐的就是我在阅读代码时看到的比较优秀的方案了，接下来分享给大家let totalTime = 3000 // 假设视频播放为3s。

35

社区成员

32

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章