keep-alive 导致的VueAwesomeSwiper不自动轮播,

<div style=”height:2.944rem;” >

        <div class="banner-box" v-if="swiperLists[0]">
          <swiper :options="swiperOption" :not-next-tick="notNextTick" >
            <swiper-slide class="swiper-bg swiper-box01" v-for="(i,index) in swiperLists" :key="index">
              <a :href="i.url">
                <div :style="'background: url(' + i.picUrl + ') no-repeat center center / cover;'"
                     style="height: 2.944rem;" class="headPic"></div>
              </a>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
      </div>
      
       swiperOption: { //轮播图配置
        slidesPerView:1,
      pagination: {
        el: '.swiper-pagination',
        type: 'bullets'
      },
      observer:true,//修改swiper自己或子元素时,自动初始化swiper 
                observeParents:true,//修改swiper的父元素时,自动初始化swiper 
      paginationType: 'fraction',
      autoplay: {
        delay: 1000,
        disableOnInteraction: false,
      },
       loop: true,
       spaceBetween:30,
    },
      
      ### 问题描述

问题出现的环境背景及自己尝试过哪些方法

clipboard.png
如果把这个去掉之后,整个页面都塌了

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

你期待的结果是什么?实际看到的错误信息又是什么?

有那位大神遇到过吗

回答:

你轮播图配置写在哪了呢?
你用了 keep-alive 会自动多出来几个生命周期 activated(进入页面执行的函数)、deactivated (离开执行的函数)

    你需要在

    activated(){里面执行你需要刷新的刷新的数据} 
    deactivated(){里面执行离开时先要销毁的东西}  


暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注