筒子们,又又又又来了。
今天继续前缘,
讲解小程序的自定义组件(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属性的有效值,写法是一样的,大家课下可以一一尝试,并熟练记住,很重要滴~~~
搜索并关注微信公众号:飞寝旺食
获取更多小程序运营干货、免费的开发教程、源代码等!
做小程序我们是认真的! |