首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >手把手带你学习微信小程序 —— 十(icon 标签【微信默认标签】)

手把手带你学习微信小程序 —— 十(icon 标签【微信默认标签】)

作者头像
Gorit
发布2021-12-08 20:50:28
发布2021-12-08 20:50:28
1.5K0
举报

icon 标签

一、icon 体验

先看一张图

上图展示的图标便是微信提供的,我们可以直接使用的图标

1.1 icon 的三个属性

icon 的使用简单,它只有三个属性

  1. icon 类型 type 分为 :success, success_no_circle, info, warn, waiting, cancel, download, search, clear ,分别对应上图的每一个图标
  2. icon的大小:通过 size 属性进行设置
  3. icon 的颜色,通过 color 进行修改(同css 中的color)

1.2 icon 的基本使用

代码语言:javascript
复制
<icon type="success" size="50">icon>
<icon type="success_no_circle" size="50">icon>
<icon type="info" size="50">icon>
<icon type="warn" size="50">icon>
<icon type="waiting" size="50">icon>
<icon type="cancel" size="50">icon>

更多有趣的内容请自行尝试

二、实际项目

2.1 微信支付界面支付成功展示

界面分析:

  1. icon:
  2. view标签 —— 操作成功
  3. button组件 —— 完成
  4. wxss 样式:主要采用 flex 布局,由全局样式控制,局部样式进行微调

2.2 跳转等待界面

界面分析:

  1. icon:使用等待界面的类型次 —— waiting
  2. view:操作进行中… ,后面的数字是动态变化的,通过js 传值
  3. button:取消
  4. wxss 样式:基本和上面一样
  5. js 实现倒计时

2.3 搜索栏实现

项目分析: 1.

源码在Github 上,有需要的同学请自取~ 传送门

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/07/18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • icon 标签
  • 一、icon 体验
    • 1.1 icon 的三个属性
    • 1.2 icon 的基本使用
  • 二、实际项目
    • 2.1 微信支付界面支付成功展示
    • 2.2 跳转等待界面
    • 2.3 搜索栏实现
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档