小程序中onlooad和组件执行顺序导致组件无法获取到动态数据

页面的onLoad执行是在所有组件初始化完成之后的。
所以就会出现动态数据父传子时页面无法正常加载
下面是使用圆形进度条时遇到的问题:

页面使用:

<view class="circle">
  <circle draw='circwewle1' per = '{{pre}}'  r = '80'/> 
</view>

pre是进度百分比1-100 需要根据动态获取的数据赋值

页面js:

data: {
  	pre:''
},
onLoad: function (options) {
	// 此处省略获取值得方法
    let thispre = credit/maxcredit*100   //credit和maxcredit是我用来计算百分比的字段
	this.setData({{
      pre: thispre
	})
}

解决:
在使用组件的父元素上添加wx:if="{{isShow == 1}}"

<view class="circle" wx:if="{{isShow == 1}}">
  <circle draw='circwewle1' per = '{{pre}}'  r = '80'/> 
</view>
data: {
  	pre:'',
  	isShow:  0
},
onLoad: function (options) {
	// 此处省略获取值得方法
    let thispre = credit/maxcredit*100   //credit和maxcredit是我用来计算百分比的字段
	this.setData({{
      pre: thispre,
      isShow: 1
	})
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值