一. 属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | String | 有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear | |
| size | Number | 23 | icon的大小，单位px |
| color | Color | icon的颜色，同css的color |
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);
}
