关于不循环gif回退页面不重新显示问题--vue项目
程序员文章站
2022-03-25 09:13:07
...
1、首先建立一个vue项目
问题描述：在vue项目中使用swiper并且swiper里面的内容有部分是gif图片，那么当你在前往下一swiper的时候gif正常加载正常播放，当你回退到上一swiper时发现gif只是显示并没有展示动图，主要原因是gif加载后会缓存下来，若没有重新加载是不会再实现动图的，解决如下“
1、在gif路径下添加随机数或者不重复的唯一值。如：
<img class="bg" :src="'../../static/images/p1/p1.gif?c=' + new Date()"/>此时只要你重新加载的话你的gif都是新的，那么怎么触发重新加载呢，在vue项目中可以使用v-if来控制，如下：
<img class="bg" :src="'../../static/images/p1/p1.gif?c=' + new Date()" v-if="slideIndex == 0"/>slideIndex是我当前swiper的activeIndex
完整代码：
1、安装vue的插件有
"less": "^3.10.3", "less-loader": "^5.0.0", "vue-awesome-swiper": "^3.1.3"
2、swiper页代码
<template>
<div class="index-content">
<div>
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide>
<div class="slide slide1">
<img class="bg" :src="'../../static/images/p1/p1.gif?c=' + new Date()" v-if="slideIndex == 0"/>
<img src="../../static/images/p1/title.png"
class="base-content ani house"
swiper-animate-effect="fadeIn"
swiper-animate-duration="2s"
swiper-animate-delay="1.5s"
/>
<img src="../../static/images/p1/logo.png"
class="base-content ani logo"
swiper-animate-effect="fadeIn"
swiper-animate-duration="2s"
swiper-animate-delay="2s"
/>
</div>
</swiper-slide>
<swiper-slide>
<div class="slide slide2">
<img class="bg" src="../../static/images/p2/p2.gif"/>
<img
v-for="(item, index) in navList"
:key="index"
:src="item.img"
:class="'nav' + index"
class="nav-btn ani"
swiper-animate-effect="fadeIn"
swiper-animate-duration="2s"
:swiper-animate-delay= "((index + 0.5) / 2) + 's'"
@click="clickNav(item.index)"
/>
</div>
</swiper-slide>
<swiper-slide v-for="(item, index) in slideItem" :key="index">
<div class="slide" :class="'slide' + item.index">
<img class="bg" :src="item.gif"/>
<img
:src="item.logo"
class="base-content ani logo"
swiper-animate-effect="fadeIn"
swiper-animate-duration="2s"
swiper-animate-delay=".5s"/>
<img
:src="item.text"
class="base-content ani test"
swiper-animate-effect="fadeIn"
swiper-animate-duration="2s"
swiper-animate-delay="1.2s"/>
</div>
</swiper-slide>
<swiper-slide>
<div class="slide slide12">
<img class="bg" src="../../static/images/p12/p12.gif"/>
<img src="../../static/images/p12/logo.png"
class="logo ani"
swiper-animate-effect="fadeIn"
swiper-animate-duration="2s"
swiper-animate-delay=".5s"
/>
</div>
</swiper-slide>
</swiper>
</div>
<div v-show="showPage === true">
<img src="../../static/images/timg.gif" class="loding">
</div>
</div>
</template>
<script>
export default {
name: "index",
data () {
let that = this
return {
navList: [
{
img: require("../../static/images/p2/1.png"),
index: 2
},
{
img: require("../../static/images/p2/2.png"),
index: 3
},
{
img: require("../../static/images/p2/3.png"),
index: 4
},
{
img: require("../../static/images/p2/4.png"),
index: 5
},
{
img: require("../../static/images/p2/5.png"),
index: 6
},
{
img: require("../../static/images/p2/6.png"),
index: 7
},
{
img: require("../../static/images/p2/7.png"),
index: 8
},
{
img: require("../../static/images/p2/8.png"),
index: 9
},
{
img: require("../../static/images/p2/9.png"),
index: 10
}
], //目录
slideIndex: 0,
showPage: true,
slideItem: [
{
logo: require("../../static/images/p3/logo.png"),
text: require("../../static/images/p3/text.png"),
index: 3,
gif: require("../../static/images/p3/p3.gif"),
},
{
logo: require("../../static/images/p4/logo.png"),
text: require("../../static/images/p4/text.png"),
index: 4,
gif: require("../../static/images/p4/p4.gif"),
},
{
logo: require("../../static/images/p5/logo.png"),
text: require("../../static/images/p5/text.png"),
index: 5,
gif: require("../../static/images/p5/p5.gif"),
},
{
logo: require("../../static/images/p6/logo.png"),
text: require("../../static/images/p6/text.png"),
index: 6,
gif: require("../../static/images/p6/p6.gif"),
},
{
logo: require("../../static/images/p7/logo.png"),
text: require("../../static/images/p7/text.png"),
index: 7,
gif: require("../../static/images/p7/p7.gif"),
},
{
logo: require("../../static/images/p8/logo.png"),
text: require("../../static/images/p8/text.png"),
index: 8,
gif: require("../../static/images/p8/p8.gif"),
},
{
logo: require("../../static/images/p9/logo.png"),
text: require("../../static/images/p9/text.png"),
index: 9,
gif: require("../../static/images/p9/p9.gif"),
},
{
logo: require("../../static/images/p10/logo.png"),
text: require("../../static/images/p10/text.png"),
index: 10,
gif: require("../../static/images/p10/p10.gif"),
},
{
logo: require("../../static/images/p11/logo.png"),
text: require("../../static/images/p11/text.png"),
index: 11,
gif: require("../../static/images/p11/bg_11.jpg"),
},
],
swiperOption: {
effect: "coverflow",
direction: 'horizontal',
speed: 500,
// 变手势
grabCursor: true,
initialSlide:0,
on: {
init: function() {
that.$swiperAnimateCache(this);
that.$swiperAnimate(this);
},
slideChangeTransitionStart: function() {
},
slideChangeTransitionEnd: function() {
},
slideChange: function() {
that.$swiperAnimate(this);
that.getIndex(this.activeIndex)
}
}
},
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
methods: {
clickNav (index) {
this.swiper.slideTo(index, 0)
},
getIndex (index) {
this.slideIndex = index
}
}
}
</script>
<style lang="less" scoped >
.index-content {
width: 100vw;
height: 100vh;
overflow-y: hidden !important;
.loding{
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.slide {
position: relative;
width: 100vw;
height: 100vh;
background: #ccc;
.house, .logo, .test, .bg {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}
}
.slide2{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.nav-btn {
width: 40.2vw;
height: 7vw;
margin-top: 2rem;
}
.nav0{
margin-top: -10rem;
}
}
}
</style>
上一篇： Java ME 面临灭绝?
下一篇： Java Gems项目启动