progressBar如何清除数据？

jjsun

Webx5版本3.6，使用FileTransfer.download下载文件，通过progressBar组件提供进度条展示，程序第一次打开使用下载时，进度条可以正常显示。
之后，执行重复下载时，进度条显示情况不正常。显示数字与进度条的进度比例失调。如下图所示：
第一张图：已经执行过下载，显示100%；重复下载时，进度条没有自动回零后重新进行，进度显示（颜色）接近100%，数字部分还差好多。
第二张图，也是重复下载。数字很大（大于50%），但进度（颜色）显示接近0



如何设置 progressBar，可使其回零？或者如何实现，可以使该进度条重复赋值时，保持数字与颜色进度基本一致？


w文件见附件 index.w.zip (2.38 KB, 下载次数: 101)

2017-3-17 12:25 上传

点击文件名下载附件
w文件
进度赋值代码：
var divProgress = $(this.getElementByXid('progressBar112'));

fileTransfer.onprogress = function(progressEvent) { //文件传输插件对象的进度方法调用
        var percentProgress = parseInt((progressEvent.loaded / progressEvent.total) * 100) + "%"; //获取已下载和总大小的百分比
        if (progressEvent.lengthComputable)//获取浏览器返回HEAD信息包含CONTENT-LENGTH为TRUE 则执行下面
        {        
                divProgress.css("width",percentProgress); //设置进度条的样式
                divProgress.html(percentProgress);        //设置进度条里面的数字
        }
};

liangyongfei

使用progress 组件吗？？
动态赋值
http://docs.wex5.com/wex5-ui-question-list-2020/
或动态绑定
http://docs.wex5.com/wex5-ui-question-list-2057/
bind-text="val('progress')"

bind-text 绑定data字段或ko对象 ！赋值就可以动态感知的

jjsun

liangyongfei 发表于 2017-3-17 13:31
使用progress 组件吗？？
动态赋值
http://docs.wex5.com/wex5-ui-question-list-2020/

this.comp(‘progress1’).set(‘valuenow’,70)与上述代码效果是一样的。
当下载的文件比较大时10M左右，每次获取的progressEvent.loaded值较小时，计算出来的百分比变化幅度较小，如好多个1，好多个2、好多个3、、、等等，每次进入onprogress 回调函数中，计算的百分比变化较小，动态调整对进度条的值时，就会出现数字与进度显示不一致。
现在的执行效果是 数字显示较大（一直到90左右），但进度条颜色还处于很小的位置，当数值到100时，进度条颜色一下充满。

liangyongfei

jjsun 发表于 2017-3-17 18:06
this.comp(‘progress1’).set(‘valuenow’,70)与上述代码效果是一样的。
当下载的文件比较大时10M左右 ...

明白了！应该是你的浏览器是单线程的！！所以js程序同步执行的代码，浏览器无法正常渲染！！

1.上网搜下浏览器模拟异步执行是如何做的！！（js模拟多线程）

2.可以让你的js方法每次执行完一次后休息一小段时间!（不要一直同步执行下去）!! 将线程让出来，给浏览器渲染页面！

jjsun

liangyongfei 发表于 2017-3-20 09:30
明白了！应该是你的浏览器是单线程的！！所以js程序同步执行的代码，浏览器无法正常渲染！！

1.上网搜下 ...

估计是单线程引起的，问题是，如何在Filetransfer.download的回调函数onprogress中让js休息呢？

jjsun

liangyongfei 发表于 2017-3-20 09:30
明白了！应该是你的浏览器是单线程的！！所以js程序同步执行的代码，浏览器无法正常渲染！！

1.上网搜下 ...

从网上找了一个纯css写的进度条，替换上去后，可以正常使用。平台自带的进度条组件，不好用

liangyongfei

jjsun 发表于 2017-3-20 13:30
从网上找了一个纯css写的进度条，替换上去后，可以正常使用。平台自带的进度条组件，不好用
...

欢迎分享下代码！如何实现的！！谢谢

jjsun

liangyongfei 发表于 2017-3-20 14:52
欢迎分享下代码！如何实现的！！谢谢

纯css构建的进度条，使用方法与系统自带的进度条组件类似，但不会出现js线程被占用而不渲染的情况

在需要显示进度条的地方，在w文件中增加如下代码：
   <div class="progressZdy" xid="progressZdy">
      <span class="blue" style="width: 0%;"><span>0%</span></span>
   </div>

在css文件中，增加样式：
.progressZdy {
  margin: 10px auto;
  width: 99%;
  height: 30px;
  background: #ebebeb;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-radius: 10px;
}
.progressZdy > span {
  position: relative;
  float: left;
  margin: 0 -1px;
  min-width: 30px;
  line-height: 24px;
  text-align: center;
  background: #cccccc;
  border: 1px solid;
  border-color: #bfbfbf #b3b3b3 #9e9e9e;
  border-radius: 10px;
  background-image: -webkit-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);
  background-image: -moz-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);
  background-image: -o-linear-gradient(top, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);
  background-image: linear-gradient(to bottom, #f0f0f0 0%, #dbdbdb 70%, #cccccc 100%);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.progressZdy > span > span {
  padding: 0 8px;
  font-size: 20px;
  font-weight: bold;
  color: #404040;
  color: rgba(0, 0, 0, 0.7);
  text-shadow: 0 1px rgba(255, 255, 255, 0.4);
}

.progressZdy .blue {
  background: #5aaadb;
  border-color: #459fd6 #3094d2 #277db2;
  background-image: -webkit-linear-gradient(top, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);
  background-image: -moz-linear-gradient(top, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);
  background-image: -o-linear-gradient(top, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);
  background-image: linear-gradient(to bottom, #aed5ed 0%, #7bbbe2 70%, #5aaadb 100%);
}


js代码：
fileApi.download2(this.baseUrl + '/hydocs/' + this.today +'.zip',destFile,
        function(progressEvent){
                    var percentProgress = parseInt((progressEvent.loaded / progressEvent.total) * 100) + "%"; //获取已下载和总大小的百分比
                    var divProgress = $(self.getElementByXid('progressZdy')).find('span');
                    if (progressEvent.lengthComputable)//获取浏览器返回HEAD信息包含CONTENT-LENGTH为TRUE 则执行下面
                    {        
                              divProgress.css('width',percentProgress);
                              divProgress.find('span').html(percentProgress);
                     }
                        }).done(function(fileEntry){
                                console.log("**btnDownClick,下载成功，fileEntry.toURL()="+fileEntry.toURL());
                               
                        }).fail(function(err){
                                console.log("**btnDownClick,下载失败.code="+err.code);
                               
                        });

download2 : function(uri,destFile,fnProgress){
      var dtd = $.Deferred();
      var fileTransfer = new FileTransfer();
      if(fnProgress){
            fileTransfer.onprogress = function(progressEvent) { //文件传输插件对象的进度方法调用
                    fnProgress(progressEvent);
             };
       }
        fileTransfer.download(encodeURI(uri),destFile,                     function(fileEntry) {
                 dtd.resolve(fileEntry);
          },                     function(err) {  //出错回调函数
                console.log("**download2,下载错误,error source=" + err.source );                                 console.log("**download2,下载错误,error target=" + err.target + ",code=" + err.code);
                dtd.reject(err);
          }                     );
       return dtd.promise();
},