收藏
评论

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

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)

 }


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

扫码体验

赞 0
收藏
登录 后发表内容