微信小程序组件(三)icon
来源:互联网 发布:cv用录音软件 编辑:程序博客网 时间:2024/05/29 19:15
下面一下记录小程序的icon组件使用,依旧先展示一下效果图,有三组图标。
1.在js文件的data对icon属性进行定义:
iconSize定义icon的大小,单位为px;
iconColor定义icon的颜色,可用指定颜色、rgb格式颜色和16进制颜色;
iconType定义icon的样式,为目前官网支持的样式。
Page({ data: { iconSize: [20, 30, 40, 50, 60, 70], iconColor: [ 'red', 'orange', 'yellow', 'green', 'blue', 'purple', 'rgb(0,255,255)', "#118BFD" ], iconType: [ 'success', 'success_circle', 'success_no_circle', 'info', 'info_circle', 'warn', 'waiting', 'waiting_circle', 'cancel', 'download', 'search', 'clear', 'safe_success','safe_warn','circle' ] }})2.在wxml中进行引用 ↓
第一组使用相同的样式success,不同的尺寸;
第二组使用相同的尺寸40px,用wx:for="{{iconType}}"循环引用不同样式。
第三组使用相同尺寸和样式,展示各种颜色。
<view class="group"> <block wx:for="{{iconSize}}"> <icon type="success" size="{{item}}"/> </block></view><view class="group"> <block wx:for="{{iconType}}"> <icon type="{{item}}" size="40"/> </block></view><view class="group"> <block wx:for="{{iconColor}}"> <icon type="success" size="40" color="{{item}}"/> </block></view>
group样式代码 ↓
.group{ height: 150px; width: 100%;}3.最后附上官方属性定义
属性名 类型 默认值 说明
欢迎交流。
阅读全文
0 0
- 微信小程序组件(三)icon
- 微信小程序----icon组件
- 微信小程序把玩(十一)icon组件
- 微信小程序----组件之icon
- 微信小程序学习(四)之icon组件
- 2.2.1微信小程序内容组件图标 icon
- 微信小程序媒体组件(三)video
- 微信小程序-Icon图标
- 微信小程序学习(三)之swiper组件
- 微信小程序例子——使用icon组件显示常用图标
- 微信小程序学习(7)-icon
- 微信小程序使用icon图标
- 微信小程序使用 icon-font
- Material 组件 md-icon
- 微信小程序 Button按钮与Icon图标
- 【微信小程序】icon系统图标案例
- (三)微信小程序之容器组件view实现水平和纵向布局
- 组件生命周期(三)
- 个人排名
- 将java程序打包成exe可执行文件
- Spring Boot多数据源配置与使用
- matplotlib实现数据可视化
- matplotlib绘制常见概率图
- 微信小程序组件(三)icon
- 你可能会因为关键字选取错误造成损失
- 字面量(literal)与 C 语言复合字面量(compound literals)
- php --ini 可查看当前使用的php版本以及 php.ini所在的目录
- pandas处理各种表格数据
- C-NOIP1998P3 二的幂次方
- bzoj1095[ZJOI2007]捉迷藏
- 网页加载进度条--6种
- 数据加载存储和文件格式