1. 基本用法：
内置图标可以直接使用 type 属性指定，也可以使用 size、color 等属性进行样式调整。
<icon type="success" size="30" color="#00ff00"></icon>
2. 内置图标类型：
icon 支持多种内置图标，常用的一些类型包括：
- success：成功图标
- info：信息图标
- warn：警告图标
- waiting：等待图标
- clear：清除图标
- search：搜索图标
- cancel：取消图标
- download：下载图标
- loading：加载中图标
3. 自定义图标：
可以使用自定义图标，需提供图标路径，支持网络图片和本地图片。
<icon type="success" size="30" color="#00ff00"></icon>
<icon type="success" size="30" color="#00ff00" src="/images/custom-icon.png"></icon>
4. 点击事件：
icon 支持绑定点击事件，通过 bindtap 属性实现。
<icon type="success" size="30" color="#00ff00" bindtap="handleTap"></icon>
Page({
handleTap: function(event) {
console.log('Icon tapped:', event);
}
})
5. 尺寸和颜色：
可以通过 size 和 color 属性调整图标的尺寸和颜色。
<icon type="success" size="50" color="#ff0000"></icon>
6. 动画效果：
icon 支持一些动画效果，如 animation 属性。
<icon type="success" size="30" color="#00ff00" animation="{{animation}}"></icon>
Page({
data: {
animation: null
},
onLoad: function() {
// 创建一个动画实例
const animation = wx.createAnimation({
duration: 1000,
timingFunction: 'linear',
});
// 设置动画效果
animation.scale(2).rotate(45).step();
// 更新数据，启动动画
this.setData({
animation: animation.export()
});
}
})
以上是关于微信小程序 icon 组件的一些基本用法和属性。icon 组件常用于显示各种状态、操作等的图标，通过调整属性和样式，可以满足不同的设计需求。
转载请注明出处：http://www.zyzy.cn/article/detail/796