uniapp实现GIF图列表默认不播放，当鼠标移入每个图片时再播放

在 UniApp 中实现 GIF 图片列表默认不播放，只有当鼠标悬停在某张图片上时才开始播放，可以按照以下步骤操作：

1. 首先，在 HTML 结构上，为每个 GIF 图片添加一个 `<image>` 元素，并设置初始状态为 `src` 属性指向 GIF 图片的 URL，而 `mode` 属性设为 `normal`，表示默认显示静止图像。

<view class="gif-list">
  <image v-for="(item, index) in gifList" :key="index" :src="item.src" mode="normal" @mouseenter="handleEnter(index)" @mouseleave="handleLeave(index)">
  </image>
</view>

2. 然后，在 Vue 的组件中，定义数据数组 `gifList` 存放 GIF 图片源和一些其他配置，以及两个事件处理函数 `handleEnter` 和 `handleLeave`。

export default {
  data() {
    return {
      gifList: [
        { src: 'path/to/gif1.gif', isPlaying: false },
        { src: 'path/to/gif2.gif', isPlaying: false },
        // 更多 GIF...
      ],
    };
  },
  methods: {
    handleEnter(index) {
      this.gifList[index].isPlaying = true;
      // 如果你想实现动态加载或切换播放，可以在这里添加相应的代码
    },
    handleLeave(index) {
      this.gifList[index].isPlaying = false; // 播放暂停
    },
  },
};

3. 在 CSS 上，你可以为 `.gif-list` 设置样式，让图片变为点击区域，例如：

.gif-list {
  position: relative;
  cursor: pointer;
}

.gif-list .img-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

4. 当鼠标离开图片时，调用 `handleLeave` 函数停止播放；当鼠标进入图片时，调用 `handleEnter` 函数并设置 `isPlaying` 为 `true`，从而触发 GIF 动画播放。注意，这里假设你的 GIF 动画已经包含了自动播放功能，如果没有，你需要额外处理播放逻辑。