You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
1.6 KiB
95 lines
1.6 KiB
<template>
|
|
<view class="gif-container">
|
|
<view class="dynamic-container">
|
|
<image
|
|
:src="gifSrc"
|
|
mode="widthFix"
|
|
class="gif-image"
|
|
:style="{ display: isPlaying ? 'block' : 'none' }"
|
|
@load="startGifPlay"
|
|
></image>
|
|
<image
|
|
:src="staticCover"
|
|
mode="widthFix"
|
|
class="gif-image"
|
|
:style="{ display: isPlaying ? 'none' : 'block' }"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
// GIF图片路径
|
|
gifSrc: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
// 静态封面图
|
|
staticCover: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// GIF播放时长(毫秒)
|
|
duration: {
|
|
type: Number,
|
|
default: 2000
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
isPlaying: false,
|
|
playTimer: null
|
|
}
|
|
},
|
|
methods: {
|
|
// 开始播放GIF
|
|
startGifPlay() {
|
|
this.isPlaying = true;
|
|
|
|
// 清除之前的定时器
|
|
if (this.playTimer) {
|
|
clearTimeout(this.playTimer);
|
|
}
|
|
|
|
// 播放完成后显示静态封面
|
|
this.playTimer = setTimeout(() => {
|
|
this.isPlaying = false;
|
|
}, this.duration);
|
|
}
|
|
},
|
|
onUnload() {
|
|
// 页面卸载时清除定时器
|
|
if (this.playTimer) {
|
|
clearTimeout(this.playTimer);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.gif-container {
|
|
width: 100vw;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.gif-image {
|
|
width: 100vw;
|
|
height: auto;
|
|
}
|
|
|
|
.dynamic-container {
|
|
position: relative;
|
|
width: 100vw;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.dynamic-container image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
</style>
|
|
|