微信小程序图标 icon组件

旧城等待， 2021-09-07 23:18 625阅读 0赞

完整微信小程序(Java后端) 技术贴目录清单页面（必看）

图标。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。






































属性 类型 默认值 必填 说明 最低版本
type string 是 icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear 1.0.0
size number/string 23 否 icon的大小 1.0.0
color string 否 icon的颜色，同css的color 1.0.0

示例代码

在开发者工具中预览效果

index.js

  1. Page({ 
  2.   data: { 
  3.     iconSize: [20, 30, 40, 50, 60, 70],
  4.     iconColor: [
  5.       'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
  6.     ],
  7.     iconType: [
  8.       'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
  9.     ]
  10.   }
  11. })

index.wxml

  1. <view class="group">
  2.   <block wx:for="{ {iconSize}}">
  3.     <icon type="success" size="{ {item}}"/>
  4.   </block>
  5. </view>
  7. <view class="group">
  8.   <block wx:for="{ {iconType}}">
  9.     <icon type="{ {item}}" size="40"/>
  10.   </block>
  11. </view>
  14. <view class="group">
  15.   <block wx:for="{ {iconColor}}">
  16.     <icon type="success" size="40" color="{ {item}}"/>
  17.   </block>
  18. </view>

index.wxss

  1. .intro { 
  2.   margin: 30px;
  3.   text-align: center;
  4. }

运行效果：

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6U6xvtUt-1621995932651)(image-20210526093034286.png)\]

微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板

发表评论

表情：
评论列表 （有 0 条评论，625人围观）

还没有评论，来说两句吧...

相关阅读