手把手带你学习微信小程序 —— 十(icon 标签【微信默认标签】)
2023-04-18 14:49:34 时间
icon 标签
一、icon 体验
先看一张图
上图展示的图标便是微信提供的,我们可以直接使用的图标
1.1 icon 的三个属性
icon 的使用简单,它只有三个属性
- icon 类型 type 分为 :
success, success_no_circle, info, warn, waiting, cancel, download, search, clear
,分别对应上图的每一个图标 - icon的大小:通过 size 属性进行设置
- 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 微信支付界面支付成功展示
界面分析:
- icon:
- view标签 —— 操作成功
- button组件 —— 完成
- wxss 样式:主要采用
flex
布局,由全局样式控制,局部样式进行微调
2.2 跳转等待界面
界面分析:
- icon:使用等待界面的类型次 —— waiting
- view:操作进行中… ,后面的数字是动态变化的,通过js 传值
- button:取消
- wxss 样式:基本和上面一样
- js 实现倒计时
2.3 搜索栏实现
项目分析: 1.
源码在Github 上,有需要的同学请自取~ 传送门
相关文章
- 进入深水区的5G专网应用,如何实现从1到N?
- 5G助推工业互联网发展,未来还需注意这两点
- 5G实现“1到N”的突破需要时间
- 生物识别在门禁控制领域的应用和发展
- 人工智能蓄势待发安防迎接机遇与挑战
- 5G手机默认开启SA功能新型消费终端加速成熟
- 博睿数据2021战略发布巡展,开辟IT运维创新路径
- F5 One-WAF,助力应对混合多云环境的安全挑战
- 浅谈人工智能技术赋能英语学习
- 语音识别的发展之路要怎么走
- F5全数据通路防护能力,为企业数字化转型保驾护航
- 5G呼啸而来,将开启无限商机
- 机器视觉在工业领域都有哪些应用?
- 工信部:三大运营商5G手机终端连接数达到3.1亿户
- 人工智能技术在语言学领域的应用
- 5G思考丨请给5G一点宽容一点时间
- 三方面赋能智慧物流,5G成熟应用还需补齐短板
- 5G融入千行百业,成熟商用还需做到这几点
- 浅谈云原生架构的七个原则
- 5G终端,路在何方?