正常页面是这样的 我在data里面给每一个progress组件的color设置了一个属性 再引入自定义组件(一个遮罩层)之前是正常的
此时这个页面的json是{}。
但是如上两个图片显示的 当我使用
“usingComponents”: {
}
的时候 即使里面什么组建都还没有引入 progress的color属性也已经失效了
基础库版本 1.6.4 到1.7.0 都测试了
好的
<view class=‘fullX line flexC’ wx:for="{{percent}}">
<view class=‘play’>{{item.grade}} : </view>
<progress backgroundColor=“rgba(0,0,0,0)” percent=“100” style=“width:{{item.width}}rpx” color=’{{item.color}}’ stroke-width=“12” active />
</view>
.wx-progress-bar {
display: inline-block;
border-radius: 10rpx;
}
.wx-progress-inner-bar {
background-size: 9px 9px;
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
border-radius: 10rpx;
}
progress {
width: 300rpx;
margin: 8rpx 20rpx 0 20rpx;
}
percent: [
{ width: 100, people: 0, grade: “初级”, color: “#f26420” },
{ width: 100, people: 0, grade: “二级”, color: “#ef2e35” },
{ width: 100, people: 0, grade: “三级”, color: “#fbba1b” },
{ width: 100, people: 0, grade: “四级”, color: “#4f308d” },
{ width: 100, people: 0, grade: “高级”, color: “#f86b2e” }
]