icon图标组件说明:
icon是一种图标格式，用于系统图标、软件图标等，这种图标扩展名为.icon、.ico。常见的软件或windows桌面上的那些图标一般都是ICON格式的。在应用上面很多地方用到了icon图标,这样方便程序表述程序返回的操作状态,用户一眼就能看出应用返回的意思,提高用户体验,在小程序的组件提供了常用的icon图标,详细使用看下面介绍!
icon图标组件用法说明：
在使用的icon的时候，使用icon标签，然后有type属性和size属性，
具体的属性看最后的属性总结,标签的使用参考下面的代码。

示例代码的运行效果如下：

下面是WXML代码：
[XML] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<view class="page">
    <view class="page__hd">
        <view class="page__title">Icons</view>
        <view class="page__desc">图标</view>
    </view>
    <view class="page__bd">
        <view class="icon-box">
            <icon type="success" size="93"></icon>
            <view class="icon-box__ctn">
                <view class="icon-box__title">成功</view>
                <view class="icon-box__desc">用于表示操作顺利达成</view>
            </view>
        </view>
        <view class="icon-box">
            <icon type="info" size="93"></icon>
            <view class="icon-box__ctn">
                <view class="icon-box__title">提示</view>
                <view class="icon-box__desc">用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息</view>
            </view>
        </view>
        <view class="icon-box">
            <icon type="warn" size="93" color="#C9C9C9"></icon>
            <view class="icon-box__ctn">
                <view class="icon-box__title">普通警告</view>
                <view class="icon-box__desc">用于表示操作后将引起一定后果的情况</view>
            </view>
        </view>
        <view class="icon-box">
            <icon type="warn" size="93"></icon>
            <view class="icon-box__ctn">
                <view class="icon-box__title">强烈警告</view>
                <view class="icon-box__desc">用于表示操作后将引起严重的不可挽回的后果的情况</view>
            </view>
        </view>
        <view class="icon-box">
            <icon type="waiting" size="93"></icon>
            <view class="icon-box__ctn">
                <view class="icon-box__title">等待</view>
                <view class="icon-box__desc">用于表示等待</view>
            </view>
        </view>
        <view class="icon_sp_area">
            <icon type="success" size="23"></icon>
            <icon type="success_no_circle" size="23"></icon>
            <icon type="circle" size="23"></icon>
            <icon type="warn" size="23" color="#F43530"></icon>
            <icon type="download" size="23"></icon>
            <icon type="info_circle" size="23"></icon>
            <icon type="cancel" size="23"></icon>
            <icon type="search" size="20"></icon>
        </view>
    </view>
</view>
下面是WXSS代码：
[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
icon{
    margin-right: 13px;
}
.page__bd {
    padding-left: 40px;
    padding-right: 40px;
    text-align: left;
}
.icon-box{
    margin-bottom: 25px;
    display: flex;
    align-items: center;
}
.icon-box__ctn{
    flex-shrink: 100;
}
.icon-box__title{
    font-size: 20px;
}
.icon-box__desc{
    margin-top: 6px;
    font-size: 12px;
    color: #888888;
}
.icon_sp_area {
    margin-top: 10px;
    text-align: left;
}
icon图标组件的主要属性：
属性
类型
默认值
说明
type
String
  
icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size
int
23
icon的大小，单位px
color
Color
  
icon的颜色，同css的color

点击查看原文

微信小程序组件解读和分析：四、icon图标的更多相关文章

  1. 微信小程序组件解读和分析：六、progress进度条

    progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...

  2. 微信小程序组件解读和分析：五、text文本

    text文本组件说明: text 文本就是微信小程序中显示出来的文本. text文本组件的示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 <v ...

  3. 微信小程序组件解读和分析：十四、slider滑动选择器

    slider滑动选择器组件说明: 滑动选择器. slider滑动选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 ...

  4. 微信小程序组件解读和分析：十、input输入框

    input输入框组件说明: 本文介绍input 输入框的各种参数及特性. input输入框示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 01 02 03 04 0 ...

  5. 微信小程序组件解读和分析：八、checkbox复选项

    checkbox复选项组件说明: checkbox是小程序表单组件中的一个组件,作用是在表单中引导用户做出选择. 要使用checkbox组件,还需要在同组中所有的checkbox标签外使用checkb ...

  6. 微信小程序组件解读和分析：一、view（视图容器 ）

    view组件说明:    视图容器    跟HTML代码中的DIV一样,可以包裹其他的组件,也可以被包裹在其他的组件内部.用起来比较自由随意,没有固定的结构. view组件的用法: 示例项目的wxml ...

  7. 微信小程序组件解读和分析：十五、switch 开关选择器

    switch 开关选择器组件说明: switch,开关选择器.只能选择或者不选.这种属于表单控件或者查询条件控件. switch 开关选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯 ...

  8. 微信小程序组件解读和分析：十三、radio单选项目

    radio单选项目组件说明: radio:单选项目. radio-group: 单项选择器,内部由多个<radio/>组成. radio单选项目示例代码运行效果如下: 下面是WXML代码: ...

  9. 微信小程序组件解读和分析：十二、picker滚动选择器

    picker滚动选择器组件说明: picker: 滚动选择器,现支持三种选择器,通过mode属性来区分, 分别是普通选择器(mode = selector),时间选择器(mode = time),日期 ...

随机推荐

  1. SAS编程基础 - 数据获取与数据集操作(1)

    1. 数据来源 SAS数据来源主要有两种:一是通过input语句创建,另外一种方式是通过外部数据文件获取. 1.1 libname 1.2 odbc 1.3 passthrough 1.4 impor ...

  2. psychology

    壹.自身(荣.命)   一.职业分析   ㈠.分析性格→分析长处和短处→分析大家都有的长处→确定自己最终发展的专业.   1 .性格--宗正   耐压力特强,即使肩头责任重大,也能够处理得稳稳当当,是 ...

  3. [React] Prevent Unnecessary Rerenders of Compound Components using React Context

    Due to the way that React Context Providers work, our current implementation re-renders all our comp ...

  4. CLLocation的属性以及使用的解释

    http://blog.csdn.net/u012496940/article/details/47405345  上一篇的链接(一个定位实例) 从上一篇中的实例了解所使用的一些元素: CLLcati ...

  5. cocos2dx-3.0(21) 移植android平台 说多了都是泪

    ----我的生活,我的点点滴滴! ! 网上3.0的教程真心少.能够说没有吧,大多都是2.x 或者 3.0測试版之类的,因为我心大,没有照着2.x去搞,后来搞完后总结了一下,发觉事实上3.0的移植and ...

  6. node+vue-cli+webpack搭建教程

    链接:https://segmentfault.com/a/1190000009160934?_ea=1849098 链接:https://www.jianshu.com/p/2769efeaa10a ...

  7. 高速清空linux下文本文件内容

    1.[root@desktop huage]# : > filename :是一个占位符.不会产生不论什么输入   2.[root@desktop huage]# > filename 相 ...

  8. 通讯编程入门--WEBSOCKET

    C#通讯编程入门--WEBSOCKET WebSocket服务端 C#示例代码 using System; using System.Collections.Generic; using System ...

  9. ZOJ 3870 Team Formation 贪心二进制

                                                    B - Team Formation Description For an upcoming progr ...

  10. 容器ArrayList原理（学习）

    一.概述 动态数组,容量能动态增长,元素可以为null,用数组存储,非线程同步(vector线程同步) 每个 ArrayList 实例都有一个容量,该容量是指用来存储列表元素的数组的大小,自动增长(默 ...