uniapp实现重新播放gif

最新推荐文章于 2024-09-19 15:37:39 发布

原创最新推荐文章于 2024-09-19 15:37:39 发布 · 4.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css

uniapp 专栏收录该内容

8 篇文章

订阅专栏

这篇博客介绍了一种在Vue应用中通过修改URL参数实现GIF图片重新播放的方法。作者通过在按钮点击事件中添加时间戳，强制浏览器重新加载图片，从而达到循环播放GIF的效果。代码示例详细展示了实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<tempalte>
	<view>
		<image :src="gifUrl" class="img-gif"></image>
		<button @click="resetGif">重新播放</button>
	</view>
</template>
<script>
	import permit_app from '@/config/permit_app.js'
	export default {
		data() {
			return {
				gifUrl: '../static/test.gif'
			}
		},
		methods: {
			resetGif() {
				// 通过拼接时间戳实现重新播放效果
				this.gifUrl = `../static/test.gif?${new Date().getTime()}`
			},
		}
	}
</script>
<style lang="scss" scoped>
	.img-gif {
		width: 400rpx;
		height: 400rpx;
	}
</style>