uniapp实现刷新旋转图标(引入阿里iconfont图标库)

Bunury

已于 2024-10-03 15:37:30 修改

阅读量194

点赞数 4

分类专栏： Uniapp 文章标签： uni-app 前端小程序

于 2024-10-03 15:26:03 首次发布

本文链接：https://blog.csdn.net/weixin_49352307/article/details/142692150

版权

Uniapp 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

uniapp中导入阿里图标库图标,实现点击刷新,实现图标旋转。

1.项目中引入阿里图标库

阿里图标库:iconfont-阿里巴巴矢量图标库

选择喜欢的图标库,选择图标加入购物车

2.点开购物车,查看新增的图标

3.添加到我的项目中

4.点击我的项目,查看新增的图标

5.赋值项目代码到创建新目录iconfont/iconfont.wxss

6.去掉//，在浏览器中打开这个代码

7.复制下面的代码到iconfont.WXSS下面

如何使用?

<template>
 <div class="iconfont icon-zhuanjia"></div>
</template>

案例:刷新图标旋转

<template>
  <view>
    <div style="margin-left: 20px;height: 20px;display: flex;">
      <div class="iconfont icon-shuaxin" :class="{ 'rotate-animation': flag }"
        style="width: 20px;height: 20px;font-size: 20px;"></div>
      <span style="color: blue; margin-left: 10px;" @click="xzHandle">点击旋转</span>
    </div>
    <!-- 使用其他图标 -->
    <div class="iconfont icon-zhuanjia"></div>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";

const flag = ref(false);
// 实现旋转
const xzHandle = () => {
  if (flag.value === true) return//节流
  flag.value = true;
  setTimeout(() => {
    flag.value = false;
  }, 1000);

};
</script>

<style scoped>
.rotate-animation {
  transition: 1s;
  /* 明确指定 transition 应用于 transform 属性 */
  transform: rotate(360deg);
}
</style>