微信小程序图标 icon组件

旧城等待， 2021-09-07 23:18 524阅读 0赞

[完整**微信小程序(Java后端) 技术贴**目录清单页面（必看）][Java_]

图标。组件属性的长度单位默认为px，[2.4.0][]起支持传入单位(rpx/px)。

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">必填</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">type</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">是</td> 
   <td align="left">icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">size</td> 
   <td align="left">number/string</td> 
   <td align="left">23</td> 
   <td align="left">否</td> 
   <td align="left">icon的大小</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">color</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">icon的颜色，同css的color</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
 </tbody> 
</table>

**示例代码**

[在开发者工具中预览效果][Link 1]

index.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'
        ]
      }
    })

index.wxml

index.wxss

.intro { 
      margin: 30px;
      text-align: center;
    }

运行效果：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6U6xvtUt-1621995932651)(image-20210526093034286.png)\]][img-6U6xvtUt-1621995932651_image-20210526093034286.png]

> 微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板

[Java_]: https://blog.csdn.net/caoli201314/article/details/116643190
[2.4.0]: https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html
[Link 1]: https://developers.weixin.qq.com/s/LK9tzcmM6QYj
[img-6U6xvtUt-1621995932651_image-20210526093034286.png]: /images/20210716/697f3fc9a35a4e9aac82447d98d63e34.png