关于不循环gif回退页面不重新显示问题--vue项目

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>