【讲故事time】只看干货往下翻↓↓↓
哥们儿用UNIAPP开发微信小程序的过程中,遇到这么一个组件
这是插件市场中的一个案例,作者使用的进度条是vant的Circle 环形进度条
哥们儿开心的很呀,这东西粘贴一下改改数,一天的工作量不就达成了吗?
但是因为种种原因,我还是太高估自己了,vant引入不进去!
还好哥脑瓜子转得快,既然中心是个图层,正好盖到了进度条的内圈。
那我只要把环形进度条删了,用background: conic-gradient把这玩意写成个中心旋转的饼图,不是一个效果吗!?
定义下属性,再用js获取dom改个值,嗯,应该没问题
CSS:
.view1 {background: conic-gradient(var(--one) 0 var(--zero), #d6d6d6 0 100%);}
JS:
document.documentElement.style.setProperty('--zero',45)
document.documentElement.style.setProperty('--one',"red")
成了!然后再盖住中心
完美!
但是到了微信小程序直接炸了,人家就指着我鼻子说,你要个锤子document!?
像我这种初学者直接傻眼
【正题】停停停,干货到了
给需要动态修改的样式创建对象
.view1 {background: conic-gradient(var(--one) 0 var(--zero), #d6d6d6 0 100%);}
然后不多废话,直接在内联中和js对象进行绑定
<view class="view2" :style="{'--one':color1,'--zero':data1}"></view>
然后就可以随意对样式进行动态操作了
this.color1='#74a9ff';
this.data1='20%';
完工,希望这篇文章能帮到你,本人也是初学者,可能在数据或者表达上有些难懂,如果需要帮助随时欢迎私信...