微信小程序icon图标使用详解
2021/12/3 17:08:34
本文主要是介绍微信小程序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图标使用详解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-302024年最新版云开发cms开通步骤,开始开发微信小程序前的准备工作,认真看完奥!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架
- 2024-01-13小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-05钉钉小程序生态—企业机器人加互动卡片,改善用户体验的开始!
- 2023-12-29【UniApp】-uni-app-打包成小程序
- 2023-12-26性能翻倍!京东亿级体量小程序优化实践
- 2023-12-25小程序优化:第三方SDK过大解决方案
- 2023-11-26微信小程序文件预览和下载-文件系统
- 2023-11-2652天学习微信小程序计划No.2:注册小程序账号&安装开发者工具