-
-
前端小姐姐 小试身手Lv3
发表于2020-4-30 18:12
楼主
本帖最后由 前端小姐姐 于 2020-4-30 18:13 编辑
今天要分享的这个酷屏自定义小组件我把命名为css3气泡效果小组件，效果如下图：
这些小气泡图会依次从右下角浮动出来，然后又慢慢移动到右下角处消失，移动的过程大小也在变化。
动画效果主要用到的是css3的animation属性，这个属性功能很强大，可以实现很多酷炫的效果，这里就不做过得的赘述，感兴趣的可以去百度搜索了解下，今天我这里主要是分享下在酷屏里怎么实现这个小组件里的取数和一些属性的变化。
先来说说这个组件的取数：就是这一个个小气泡里标题和下边的数值是如何对接上我们想要的数值的
我这里取的是不同年份销量这个表格里的数据，标题展示的是年份，值显示的是销量
在编辑组件是想要让组件对接上表格里的数据，主要就是取数定义，我这个组件里定义了2个变量：names（标题）、values（数值），定义好后，就需要我们在js里初始化数据 vardata.names、vardata.values，然后应用在demo结构里，就好了。
然后我们来说说属性：这个小组件的自定义属性是大背景和各小圆的背景颜色
这个组件里自定义了大背景图bg、圆背景颜色colors2个属性，定义好后，就需要我们在js里获取属性设置的背景图cwidget.getProperty("bg")、圆颜色cwidget.getProperty("colors").split(",")就好了。需要注意的是，多个颜色值需要我们用逗号分隔开，例如这样#e0d520,#2efbfd,#ff692d
和数据对接的我们就用取数定义，改变组件颜色、大小等就用属性，了解了这些后大家就可以根据需求改变这个组件的取值和背景图、圆的颜色了，可以根据不同的场景去更改。
