uniapp如何实现GIF默认不播放，当鼠标移入时再播放

在UniApp中，如果你想实现在默认情况下不自动播放GIF图，而是等待用户鼠标悬停后再开始播放，你可以通过CSS样式和JavaScript结合来达到这个效果。以下是简单的步骤：

1. **HTML部分**:

<view class="gif-container">
  <img src="your_gif_url.gif" :class="{ 'inactive': !isHovered }" @mouseenter="startPlay" @mouseleave="stopPlay" />
</view>

在这里，`your_gif_url.gif`替换成你的GIF图片URL，`inactive`类用于控制图片的显示状态。

2. **CSS部分**:

.gif-container {
  display: inline-block;
}

.gif-container img.inactive {
  animation-play-state: paused; /* 默认暂停动画 */
}

3. **JavaScript部分 ( Vue.js 示例 )**:

<script setup>
import { ref } from 'vue';

const isHovered = ref(false); // 使用Vue的ref管理状态

function startPlay() {
  isHovered.value = true; // 当鼠标进入时设置为true，让图片开始播放
}

function stopPlay() {
  isHovered.value = false; // 当鼠标离开时设置为false，恢复到暂停状态
}
</script>

当你将鼠标移动到`img`元素上时，`startPlay`函数会被触发，图像会开始播放；而当鼠标移开时，`stopPlay`函数会被触发，图像会暂停。如果你使用的是其他框架，比如原生JS或者WXML，则需要相应地调整事件监听和状态管理的部分。