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/微信小程序