代码Github地址

一. 属性说明

type演示.png

二. 添加点击事件

<icon bindtap="iconTap"></icon>iconTap:function(event) {}

三. 可运行代码

• wxml

<view class="group">  <block wx:for="{{iconData}}" wx:key="index">    <view class="itemContainer">      <icon type="{{item.iconType}}" size="{{item.iconSize}}" color="{{item.iconColor}}" bindtap="iconTap" data-icon="{{index}}"></icon>          <text class="itemText">{{"状态描述: " + item.iconType}}</text>        </view>  </block></view>

• wxss

.group {  margin-top: 50px;  display: flex;  flex-direction: column;  align-items: center;}.itemContainer {  display: flex;  align-items: center;  margin-top: 10px;}.itemText {  margin-left: 20px;}

• js

Page({  data: {    iconData: [      {        iconSize : 20,        iconColor: 'red',        iconType : "success"      },      {        iconSize: 30,        iconColor: "orange",        iconType: "success_no_circle"      },      {        iconSize: 40,        iconColor: "yellow",        iconType: "info"      },      {        iconSize: 50,        iconColor: "green",        iconType: "warn"      },      {        iconSize: 60,        iconColor: "rgb(0,255,255)",        iconType: "waiting"      },      {        iconSize: 70,        iconColor: "blue",        iconType: "cancel"      },      {        iconSize: 80,        iconColor: "purple",        iconType: "download"      },      {        iconSize: 90,        iconColor: "black",        iconType: "search"      },      {        iconSize: 100,        iconColor: "lightGreen",        iconType: "clear"      }    ]  },    iconTap:function(event) {    var iconIndex = event.target.dataset.icon;    var dict = this.data.iconData[iconIndex];    var iconType = dict["iconType"];    wx.showToast({      title: iconType,      icon : "none",      duration : 1500    })    console.log(dict);  }

原著是一个有趣的人,若有侵权,请通知删除