微信小程序day02_09之基础组件icon

桃扇骨 2022-03-10 09:11 277阅读 0赞

### 文章目录 ###

*   *   *  一. icon的介绍与使用

### 一. icon的介绍与使用 ###

icon为图标。  
其中属性如下:  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]  
代码示例  
在wxml中 , 代码如下

在js中的代码如下

Page({ 
      data: { 
        iconSize: [20, 30, 40, 50, 60, 70],
        iconColor: [
          'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
        ],
        iconType: [
          'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
        ]
      }
    })

最终的效果如图.  
第一行为对iconSize 的循环遍历, 对size属性, 即图标的大小进行的改变  
第二行为对iconType 的循环遍历, 即改变图标的类型type  
第三行为对iconColor 的循环遍历, 即改变图标颜色color 属性  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]  
官方文档  
[https://developers.weixin.qq.com/miniprogram/dev/component/icon.html][https_developers.weixin.qq.com_miniprogram_dev_component_icon.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20220310/a099715996cf4c1da773940fc439d8be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20220310/d09e29ff0bc94593be6a8ffe441b0c75.png
[https_developers.weixin.qq.com_miniprogram_dev_component_icon.html]: https://developers.weixin.qq.com/miniprogram/dev/component/icon.html