创意电子

标题: 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/) Powered by Discuz! X3.4