小程序:图标(icon)

作者: Mccc_ | 来源:发表于2018-06-13 16:45 被阅读45次

代码Github地址

一. 属性说明

属性名 类型 默认值 说明
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);
  }

相关文章

网友评论

    本文标题:小程序:图标(icon)

    本文链接:https://www.haomeiwen.com/subject/otgjeftx.html