问题描述:
component为一个圆环,page引入这个component,根据后端传值决定圆环显示比例,所以需要page动态给component传值。
解决方法:
1.page里引用component的地方 .wxml
<view class="a_circle_item">
<circle2 r="70" p="{{protein}}"/>
<view>蛋白质</view>
</view>
2.component.js文件里需要使用 observer
properties: {
number:Number,
r:{//半径
type: String,
value: '70'
},
p:{//圆环比例
type: String,
value: '70',
observer: 'update',
},
},
methods: {
//此处是p动态传值发生时触发的事件
update(newValue) {
//原先attached即初始化时运行的代码
let rpx = Number(this.data.r/2)
this.drawCircleBg(rpx, this.data.w);//绘制 背景圆环
this.drawCircle(rpx, this.data.w, this.data.p);
},
}
理论学习:
微信开放文档-小程序-自定义组件-数据监听器
版权声明:本文为weixin_43811390原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。