创意电子

标题: 28. 教你零基础搭建小程序：小程序的常见组件—icon图标 [打印本页]

作者: Designer°尒鵬 时间: 2020-8-25 02:32
标题: 28. 教你零基础搭建小程序：小程序的常见组件—icon图标
筒子们，又又又又来了。

今天继续前缘，
讲解小程序的自定义组件（6）—— icon图标。
已经讲到6了，别着急，别放弃，
我们后面就还有3个自定义组件。
就快了，哈哈。

废话不多说，直接上干货。
关于icon 图标呢，
在小程序中，已存在一些比较简单的字体图标，可供我们使用。

如上图所示。它有三种属性：

第一行：改变的是图标的大小 size
第二行：改变的是 type 类型。
第三行：改变的是图标的各种颜色 color

列个表（重点！）

光说不练假把式，我们在开发者工具中带大家演示一下。

1、新增一个页面 demo14

2、打开de'mo14.wxml文件，删除原先的代码，加入如下代码：

3、保存，小程序页面出现绿色的"选中"图标

（一）icon 图标的大小 size

1、修改上面代码中的size，size=60，代码如下：

2、保存，小程序页面出现大一号的绿色"选中"图标

（二）icon 图标的颜色 color

上面图标颜色为绿色，我们这里要改变颜色，怎么操作呢？

1、修改上述代码color，图标变成蓝色，换算成十六进制为"#0094ff",代码如下：

2、保存，小程序页面出现蓝色的"选中"图标

这里要注意颜色的使用一定要是十六进制的，
而不是单纯的yellow、green
附上一个可以在线转换十六进制颜色的工具，
六六的使用起来
https://www.sioe.cn/yingyong/yanse-rgb-16/

（三）icon 图标的类型 type

icon的类型，有效值有以下：

success, success_no_circle,
info, warn, waiting, cancel,
download, search, clear

种类繁多，操作基本一致，但全部演示起来很累，哈哈。

接下来就演示一个有效值—— cancel

还是demo14.wxml文件中，将如下代码：

修改type="cancel"，其他不变，保存代码，看效果：

其他type属性的有效值，写法是一样的，大家课下可以一一尝试，并熟练记住，很重要滴~~~

搜索并关注微信公众号：飞寝旺食
获取更多小程序运营干货、免费的开发教程、源代码等！
做小程序我们是认真的！

欢迎光临创意电子 (https://wxcydz.cc/)