小程序:图标(icon)

代码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);
  }