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

icon 标签

• 一、icon 体验
  • 1.1 icon 的三个属性
  • 1.2 icon 的基本使用
• 二、实际项目
  • 2.1 微信支付界面支付成功展示
  • 2.2 跳转等待界面
  • 2.3 搜索栏实现

一、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 的基本使用

<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 上，有需要的同学请自取~ 传送门