uniapp图标事件

添加图标事件的方法

在UniApp中，可以通过@click或其他事件绑定方法为图标添加交互功能。以下以<uni-icons>组件为例：

<uni-icons type="contact" size="30" @click="handleIconClick"></uni-icons>

对应的JavaScript方法需要在methods中定义：

methods: {
  handleIconClick() {
    uni.showToast({
      title: '图标被点击',
      icon: 'none'
    });
  }
}

使用自定义图标库

若需使用第三方图标库（如Font Awesome），需先引入资源文件：

<template>
  <view class="iconfont icon-user" @tap="navigateToProfile"></view>
</template>

在App.vue中全局引入样式：

<style>
  @import url('/static/iconfont.css');
</style>

图标与路由结合

实现点击图标跳转页面：

methods: {
  navigateToHome() {
    uni.navigateTo({
      url: '/pages/home/index'
    });
  }
}

动态控制图标状态

通过数据绑定控制图标显示状态：

<uni-icons 
  :type="isFavorite ? 'heart-filled' : 'heart'" 
  @click="toggleFavorite">
</uni-icons>

data() {
  return {
    isFavorite: false
  };
},
methods: {
  toggleFavorite() {
    this.isFavorite = !this.isFavorite;
  }
}

图标长按事件处理

添加@longpress事件实现长按功能：

<uni-icons 
  type="trash" 
  @longpress="showDeleteConfirm">
</uni-icons>

methods: {
  showDeleteConfirm() {
    uni.showModal({
      title: '确认删除',
      content: '确定要删除此项吗？'
    });
  }
}

注意事项

• 确保使用的图标组件已正确注册
• 小程序端需注意图标文件的体积限制
• 跨平台开发时测试各端的事件兼容性
• 使用自定义图标时注意路径引用正确性