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

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

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

...全文

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

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

前端薛小帅 2021-07-30

打赏
举报

回复

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

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

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

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

有人觉得组件化就是“把代码抽出来复用”，其实不然。真正的组件化，是一种思维方式的转变把每一个 UI 元素当作一个“产品”来设计，考虑它的边界、契约、容错、演化路径。就像这个圆形进度条，表面看只是个视觉元素，背后却涉及数学建模、跨端兼容、性能优化、用户体验等多个维度。当你能把一个简单的进度条做到“极致”，那你离写出工业级应用的距离，也就不远了。🎯 所以下次接到类似需求时，别再随手找个 npm 包复制粘贴了。试试从零造轮子，你会收获更多。毕竟，

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

35

社区成员

32

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

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

+ 用AI写文章