微信小程序中怎么样缩小图标

互联网 20-3-23

微信小程序中怎么样缩小图标

微信小程序中图标使用icon组件,属性值有type、size、color,控制图标大小的是size属性,想要缩小图标,只需要将size的值设置小一点即可。

推荐学习:小程序开发

icon组件参数如下:

属性名类型默认值说明
typeString icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear
sizeNumber23icon的大小,单位px
colorColor icon的颜色,同css的color

参考代码:

<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>

2、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'     ]   } })

3、效果图:

PHP中文网,大量jquery视频教程,欢迎学习!

以上就是微信小程序中怎么样缩小图标的详细内容,更多内容请关注技术你好其它相关文章!

来源链接:
免责声明:
1.资讯内容不构成投资建议,投资者应独立决策并自行承担风险
2.本文版权归属原作所有,仅代表作者本人观点,不代表本站的观点或立场
标签: 缩小
上一篇:php获取远程图片并下载保存到本地的方法分析 下一篇:微信小程序中怎么做无缝轮播

相关资讯