uniapp进度条及下载单位转换

<view class="strip" ><view class="blue" :style="'width:'+progress+'%'"><text class="proImg" :style="'left:'+progress+'%'">{{progress}}%</text></view><view class="xz"><text>预计:{{totalBytesExpectedToWrite}}</text><text style="text-align: right;">已下载:{{totalBytesWritten}}</text></view>
</view>
data() {return {totalBytesWritten: 0, //已经下载的数据长度totalBytesExpectedToWrite: 0, //预期需要下载的数据总长度progress: 0, //进度条显示}
},
mounted(){this.download()
},
methods: {download() {let _this = this;const downloadTask = uni.downloadFile({url: 'www.baidu.com', //下载地址success: downloadResult => {console.log(downloadResult.statusCode)if (downloadResult.statusCode === 200) {uni.showToast({title: '下载成功',icon: 'none',duration: 3000});}else{uni.showToast({title: '下载失败',icon: 'none',duration: 3000});}}});downloadTask.onProgressUpdate((res) => {console.log('下载进度' + res.progress);_this.progress = res.progress;function fns(val) {if (val === 0) return "0 B"var k = 1024;var sizes = ['B', 'KB', 'MB', 'GB', 'PB', 'TB', 'EB', 'ZB', 'YB'],i = Math.floor(Math.log(val) / Math.log(k));return (val / Math.pow(k, i)).toPrecision(3) + "" + sizes[i]}function fn(val) {if (val === 0) return "0 B"var k = 1024;var sizes = ['B', 'KB', 'MB', 'GB', 'PB', 'TB', 'EB', 'ZB', 'YB'],i = Math.floor(Math.log(val) / Math.log(k));return (val / Math.pow(k, i)).toPrecision(3) + "" + sizes[i]}_this.totalBytesWritten = fns(res.totalBytesWritten)_this.totalBytesExpectedToWrite = fn((res.totalBytesExpectedToWrite))// 满足测试条件，取消下载任务。// if (_this.progress == 100) {//  console.log('下载完成')//     downloadTask.abort();// }});},
}
<style lang="scss" scoped>
.strip {position: relative;width: 72%;height: 30rpx;color: rgba(80, 80, 80, 1);background-color: #eeeeee;border-radius: 50rpx;font-size: 28rpx;margin: 0 auto;margin-top: 50rpx;
}
.blue {height: 30rpx;color: rgba(80, 80, 80, 1);background-color: #1676FE;border-radius: 50rpx;font-size: 28rpx;text-align: center;
}
.proImg {width: 50rpx;height: 30rpx;position: absolute;font-size: 26rpx;
}
.xz {width: 100%;display: flex;justify-content: space-between;text {width: 50%;color: #888;}
}</style>

uniapp进度条及下载单位转换相关推荐

转：delphi用URLDownloadToFile下载文件，用进度条跟踪下载进度
用URLDownloadToFile下载文件,如何用进度条跟踪下载进度 1:OnDownloadProgress 2:可有否具体的例子. 3:unit Unit1; interface uses ...
python下载文件加上日期_Python实现给下载文件显示进度条和下载时间代码
本篇文章小编给大家分享一下Python实现给下载文件显示进度条和下载时间代码,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 该模块调用了三个库: 1. ...
Python 给下载文件显示进度条和下载时间（一看就会！）
其实实现它方法很简单,这里我写了个进度条的模块,其中还附带上了运行时间也就是下载时间了. 该模块调用了三个库: 1.os 2.requests 3.time 话不多说,先上代码!!!. # 进度条模块 ...
uniapp项目rpx和px单位转换，满足适配需求
问题:在一整个页面上设置一个背景图片,在背景图片上放一个透明盒子.在不同型号的手机上透明盒子的位置发生变化. 问题原因: 在开发uniapp项目中我们往往用到的单位是rpx.但是用户的手机型号是不同 ...
带进度条的ASP无组件断点续传下载代码
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> <%Option Explicit%> <% '= ...
基于Blod的ajax进度条下载实现
普通的浏览器下载在web开发中,如果要实现下载功能,往往都是使用新开web页面或者是使用iframe的形式.实现起来其实很简单: <atarget="_blank"href ...
android图标随着进度条动画,Android开发之ProgressBar字体随着进度条的加载而滚动...
在网上翻阅了很多关于ProgressBar滚动效果,但是始终没有找到适合项目中的这种效果,故自己写这篇文章,记录一下写作过程,给大家做一个参考.先看下最终效果效果图我这里用的是LICEcap软件录制 ...
024_Progress进度条
1. Progress进度条 1.1. Progress进度条, 用于展示操作进度, 告知用户当前状态和预期. 1.2. Attributes 参数说明类型可选值默认值 percentage ...
iview地区加载_LoadingBar 加载进度条
LoadingBar 加载进度条概述全局创建一个显示页面加载.异步请求.文件上传等的加载进度条. 说明 LoadingBar 只会在全局创建一个,因此在任何位置调用的方法都会控制这同一个组件.主要 ...

uniapp进度条及下载单位转换

uniapp进度条及下载单位转换

uniapp进度条及下载单位转换相关推荐

最新文章

热门文章