当前位置：首页 > uni-app

uniapp图标事件

2026-03-05 00:37:42uni-app

添加图标事件的基本方法

在UniApp中为图标添加事件通常通过@click或@tap绑定方法实现。图标可以是<image>标签、<uni-icons>组件或第三方图标库（如Font Awesome）。

<template>
  <view>
    <!-- 使用uni-icons组件 -->
    <uni-icons type="contact" size="30" @click="handleIconClick"></uni-icons>

    <!-- 使用image标签 -->
    <image src="/static/icon.png" mode="widthFix" @tap="handleImageClick"></image>
  </view>
</template>

<script>
export default {
  methods: {
    handleIconClick() {
      uni.showToast({ title: '图标被点击' });
    },
    handleImageClick() {
      uni.navigateTo({ url: '/pages/detail/detail' });
    }
  }
}
</script>

使用第三方图标库

通过uni-icons以外的图标库（如Font Awesome）时，需引入对应CSS文件，并通过<text>或<view>绑定事件：

uniapp图标事件

<template>
  <view>
    <!-- Font Awesome示例 -->
    <text class="fas fa-home" @click="navigateHome"></text>
  </view>
</template>

<script>
export default {
  methods: {
    navigateHome() {
      uni.switchTab({ url: '/pages/home/home' });
    }
  }
}
</script>

<style>
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
</style>

动态控制图标状态

结合数据绑定实现图标状态切换（如收藏按钮）：

<template>
  <view>
    <uni-icons 
      :type="isFavorited ? 'star-filled' : 'star'" 
      @click="toggleFavorite">
    </uni-icons>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isFavorited: false
    }
  },
  methods: {
    toggleFavorite() {
      this.isFavorited = !this.isFavorited;
      uni.showToast({
        title: this.isFavorited ? '已收藏' : '取消收藏'
      });
    }
  }
}
</script>

图标事件传参

通过data-*属性传递参数给事件处理函数：

uniapp图标事件

<template>
  <view>
    <uni-icons 
      v-for="item in icons" 
      :key="item.id"
      :type="item.type" 
      :data-id="item.id"
      @click="handleIconWithParam">
    </uni-icons>
  </view>
</template>

<script>
export default {
  data() {
    return {
      icons: [
        { id: 1, type: 'home' },
        { id: 2, type: 'settings' }
      ]
    }
  },
  methods: {
    handleIconWithParam(e) {
      const id = e.currentTarget.dataset.id;
      console.log('点击的图标ID:', id);
    }
  }
}
</script>

阻止事件冒泡

使用@click.stop修饰符阻止事件冒泡：

<template>
  <view @click="handleParentClick">
    <uni-icons type="close" @click.stop="handleClose"></uni-icons>
  </view>
</template>

<script>
export default {
  methods: {
    handleParentClick() {
      console.log('父元素点击');
    },
    handleClose() {
      console.log('仅触发图标点击');
    }
  }
}
</script>

图标长按事件

通过@longpress实现长按触发：

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

<script>
export default {
  methods: {
    showDeleteConfirm() {
      uni.showModal({
        title: '确认删除',
        content: '长按触发删除操作'
      });
    }
  }
}
</script>