微信小程序icon图标使用详解

也许你迷茫，但是我想说，在你迷茫的同时，保持本心，过好今天就好。

icon 在微信小程序中用来显示图标。

1 icon 图标的基本使用

<view class="container"><view class="icon-box"><icon class="icon-box-img" type="success" size="44"></icon><view class="icon-box-ctn"><view class="icon-box-title">成功</view><view class="icon-box-desc">用于表示操作顺利完成</view></view></view>

其实核心代码就是

<icon  type="success" size="44"></icon>

type 是图标显示的类型可取值 success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size 是图标显示的大小默认单位是 px
color 是图标的颜色

2 type 取值概述

2.1 info

info 用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息

<icon  type="info" size="44"></icon>

2.2 warn

默认，强烈警告，用于表示由于用户原因造成的负向结果；也用于表示操作后将引起不可挽回的严重后果的情况

<icon  type="warn" size="44"></icon>

我们也可以设置一个颜色，普通警告，用于表示操作后将引起一定后果的情况；也用于表示由于系统原因而造成的负向结果

<icon  type="warn" size="44" color="#C9C9C9"></icon>

2.3 info_circle

用于在表单中表示有信息提示

<icon type="info_circle" size="44"></icon>

2.4 waiting

用于表示等待，告知用户结果需等待

 <icon  type="waiting" size="44"></icon>

2.5 success_no_circle

用于多选控件中，表示已选择该项目

<icon type="success_no_circle" size="44"></icon>

2.6 circle

用于多选控件中，表示该项目可被选择，但还未选择

<icon type="circle" size="44"></icon>

2.7 circle

用于单选控件中，表示已选择该项目

 <icon  type="success" size="44"></icon>

2.8 download

用于表示可下载

 <icon type="download" size="44"></icon>

2.9 cancel

停止或关闭

<icontype="cancel" size="44"></icon>

2.10 search

用于搜索

<icon  type="search" size="44"></icon>

完毕

微信小程序icon图标使用详解相关推荐

php小程序onload,微信小程序 loading 组件实例详解
这篇文章主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否主要属性: wxml 显 ...
微信小程序框架(二)-全面详解（学习总结---从入门到深化）
目录组件_基础视图容器 view 文本 text 图片 image 组件_滑块视图容器基本实现 Swiper常用属性说明组件_滚动视图区域水平滚动垂直滚动常用属性组件_icon 图标使 ...
微信小程序02【配置详解、生命周期-app对象使用、页面跳转详解】
学习地址:https://www.bilibili.com/video/BV1sx411z77P 笔记01:https://blog.csdn.net/weixin_44949135/article/ ...
微信小程序框架(四)-全面详解（学习总结---从入门到深化）
目录路由_navigateTo 页面跳转携带参数返回上一级页面路由_redirectTo 页面跳转路由_reLaunch 页面跳转路由_switchTab 实现 tabbar 页面跳转交 ...
微信小程序 icon图标 SVG代码转码为Base64编码格式并使用（霸霸看了都说好）
文章目录 SVG 简介什么是SVG SVG有哪些优势 SVG在小程序中的使用获取SVG资源获取对应SVG代码将SVG代码转码为Base64编码格式在具体代码中引用SVG 展示效果 SVG 简 ...
微信小程序（三）详解篇
一.什么是小程序(了解) 小程序是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下即可打开应用.也体现了"用完即走"的理念 ...
新手微信小程序制作教程步骤详解！
制作微信小程序方法: 1.在微信公众平台上申请一个小程序账号,申请完成之后需要进行微信认证,并且需要缴纳300元的认证费用.如果不缴纳300元的费用,微信小程序商城没有开通支付功能. 2.新建一个空白 ...
微信小程序框架(五)-全面详解（学习总结---从入门到深化）
目录 UI框架_TDesign 引入TDesign UI框架_TDesign组件 Rate 评分 Toast 轻提示 UI框架_Vant 使用方式引入组件 UI框架_Vant组件 Overlay 遮 ...
微信小程序框架(一)-全面详解（学习总结---从入门到深化）
目录小程序与普通网页开发的区别体验小程序微信小程序账号申请微信小程序开发者工具下载安装创建项目开发者工具说明小程序目录结构描述整体的 app 描述各自页面的 page 全局配置_Pa ...
微信小程序开发工具安装详解
从事java后端工作的程序员,为了不让自己技术落伍,或多或少应该要了解一点前端技术,特别是时下比较火爆的微信小程序,它有取代手机原生app的趋势. 本人对微信小程序是零基础认识,下面记录一下微信小程序 ...