微信小程序-Icon图标

来源：互联网发布：网络直播现象研究编辑：程序博客网时间：2024/05/23 20:27

WXML

<view>  <view>    <text >大小变化:</text>    <block wx:for="{{iconSize}}">      <icon type='success' size='{{item}}'></icon>    </block>  </view>  <view>    <text>颜色变化:</text>    <block wx:for="{{iconColor}}">      <icon type='success' size='45' color='{{item}}'></icon>    </block>  </view>  <view>    <text>图案变化:</text>    <block wx:for="{{iconType}}">      <icon type='{{item}}' size='45'></icon>    </block>  </view></view>

JS

Page({  /**   * 页面的初始数据   */  data: {    iconSize:[20,30,40,50,60,70],    iconColor:[      'red','orange','yellow','green','blue'    ],    iconType:[      'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn',      'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download',      'info_circle', 'cancel', 'search', 'clear'    ]  })

效果图:
这里写图片描述

阅读全文

0 0