收藏
回答

【bug】苹果手机progress组件percent属性值动态数据渲染无效

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug progress 客户端 6.7.2 2.3.0

   代码片段:wechatide://minicode/xBrX0lmJ7D2G


   percent="{{progressPercent}}"  ,progressPercent 在苹果手机上不显示进度条进度。,只有白色背景,安卓正常。


   只有在percent = "20" 一个实际数字,苹果手机上才显示进度条的进度。


   图片对比:


   苹果手机如下:


   


   


   安卓手机(按需求正常显示):


   


   以下是源码:

                                   

               

                   <progress class='progress' percent="{{progressPercent}}" stroke-width="{{progressHeight}}"                

               

                   activeColor="#09BB07" backgroundColor="#fff"   animation="{{progressAnimation}}" />                

           

                                   

               
                   //获取进度条加载进度                
               
                    getProgress:function(){                
               
                      //页面加载进度条                
               
                      let that = this;                
               
                      progress = setInterval(function () {                
               
                        let showPage = that.data.showPage                
               
                        let progressPercent = that.data.progressPercent;                
               
                        if (showPage){                
               
                          progressPercent = 100                         
               
                        }else{                
               
                          progressPercent++;                
               
                        }                
               
                                         
               
                        //当进度条为100时清除定时任务                
               
                                         
               
                        if (progressPercent >= 100) {                
               
                          clearInterval(progress);                
               
                        }                
               
                        //并且把当前的进度值设置到progress中                
               
                        that.setData({                
               
                          progressPercent: progressPercent                
               
                        })                
               
                                    
               
                      });                
               
                                    
               
                    },                
               
                    //隐藏进度条动画                
               
                    progressAnimation:function(){                
               
                      let that = this;                
               
                      var animation = wx.createAnimation({                
               
                        duration: 500,                
               
                        timingFunction: 'ease',                
               
                      })                
               
                                    
               
                      this.animation = animation                
               
                                    
               
                      animation.opacity(0).height(0).step()                
               
                                    
               
                      this.setData({                
               
                        progressAnimation: animation.export()                
               
                      })                
               
                      setTimeout(function(){                
               
                        that.setData({                
               
                          progressHeight: 0                
               
                        })                
               
                      },1000)                
               

                    }                

               

                   
               

           


   各路大神帮忙给看看如何解决这一问题,感激!!


   

最后一次编辑于  2018-09-11
回答关注问题邀请回答
收藏

3 个回答

登录 后发表内容