|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 不二如是 于 2018-6-15 09:37 编辑
上一讲我么搞定了cover-view容器,本次来学习基础内容中的icon。
icon是微信自带的图标,直接调用即可。
icon属性:
属性名 | 类型 | 默认值 说明 | type | String | | icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear | size | Number | 23 | icon的大小,单位px | color | Color | | icon的颜色,同css的color |
index.wxml:
- <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>
复制代码
index.js:
- Page({
- data: {
- iconSize: [20, 30, 40, 50, 60, 70],
- iconColor: [
- 'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
- ],
- iconType: [
- 'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
- ]
- }
- })
复制代码
课后作业
1、补充代码,生成一个success类型尺寸为60的图标:
答案:
如果有收获,别忘了评分 :
这位鱼油,如果喜欢小程序,请订阅 专辑☞( 传送门)( 不喜欢更要订阅 )
|
|