qq_37813237 2022-08-07 16:28 采纳率: 100%
浏览 315
已结题

swiper轮播图使用v-if隐藏再显示后空白

刚接触前端。使用html引入vue的方式,swiper轮播图一开始正常,使用v-if隐藏轮播图后,再点击按钮把v-if为true时,swiper部分空白。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.9/lib/index.css" />
    <!-- <meta name="viewport" content="width=device-width,user-scalable=no"/> -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <link href="using.css/index.css" rel = "stylesheet" type="text/css">
    <link href="using.css/lunbo.css" rel = "stylesheet">
    <link rel="stylesheet" href="./using.css/swiper.min.css">
    <link rel="stylesheet" href="./using.css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./using.css/elment.index.css">
    <script src="./js/vant.min.js"></script>
    <script src="./js/vant.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/vue.min.js"></script>
    <script src="./js/elment.index.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src = "./js/index.js"></script>
    <script src = "./js/jquery.js"></script>
    <script src="./js/swiper-bundle.min.js"></script>
    <script src = "./js/swiper.min.js"></script>
    <script src="./js/TweenMax.min.js"></script>
    <title>hh</title>
</head>
<body>
    <div id = "app">
        <div class="home">
            <div class = "head">
                <h1 >hh</h1>
            </div>
            <!-- <div class="roll"> -->
                <template v-if="layout == 'home'">
                    <div class = "banner">
                        <div class="swiper" id="gallery">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" data-poster= "./image/条套.jpg"></div>
                                <div class="swiper-slide" data-poster= "./image/80x120深色.jpg"></div>
                                <div class="swiper-slide" data-poster= "./image/周杰伦_晴天.jpg"></div>
                                <div class="swiper-slide" data-poster= "./image/周杰伦_我是如此相信_4.jpg"></div>
                               </div>
                            <div class="swiper-pagination"></div>
                            <canvas id="shows" style="position: absolute; left: 0px; top: 0px;"></canvas>
                        </div>
                    </div>
                    <div class = "modules">
                        <div class = "item" v-on:click="layout = 'quality'">                
                            <div class = "item-img">
                                <img src="./image/质量.jpeg">
                            </div>
                            <p style="color:green">质量</p>
                        </div>
                        <div class = "item">
                            <a href="">
                                <div class = "item-img"></div>
                                <p>标签2</p>
                            </a>
                        </div>
                        <div class = "item">
                            <a href="">
                                <div class = "item-img"></div>
                                <p>标签3</p>
                            </a>
                        </div>
                        <div class = "item">
                            <a href="">
                                <div class = "item-img"></div>
                                <p>标签4</p>
                            </a>
                        </div>
                        <div class = "item">
                            <a href="">
                                <div class = "item-img"></div>
                                <p>标签5</p>
                            </a>
                        </div>
                        <div class = "item">
                            <a href="">
                                <div class = "item-img"></div>
                                <p>标签6</p>
                            </a>
                        </div>
                        <div class = "item">
                            <a href="">
                                <div class = "item-img"></div>
                                <p>标签7</p>
                            </a>
                        </div>
                        <div class = "item">
                            <a href="">
                                <div class = "item-img"></div>
                                <p>标签8</p>
                            </a>
                        </div>
                        <div class = "item">
                            <a href="">
                                <div class = "item-img"></div>
                                <p>标签9</p>
                            </a>
                        </div>
                    </div>
                </template>
            <!-- </div> -->
            <div class = "foot">
                <div class = "footbotten" v-on:click="layout = 'home'">
                    <img src="./image/主页.jpg">
                </div>
                <div class = "footbotten" v-on:click="layout = 'home'">
                    <img src="./image/任务.jpg">
                </div>
            </div>
        </div>
    </div>
    <script>
            var Main = new Vue({
                el:'#app',
                data:{
                    layout:'home'
                },
                methods: {
                },
            })
            Img = [];
            var slides = document.querySelectorAll(".swiper-slide");
            for (i = 0; i < slides.length; i++) {
                Img[i] = new Image();
                Img[i].src = slides[i].getAttribute('data-poster');  //将全部图片预存储
            };
            slidesLength = slides.length -1
            tweenObj = {
                translate: 0
            };
            var canvas = document.getElementById("shows");
            ctx = canvas.getContext("2d");
        
            window.onload = function() {
                var swiper = new Swiper('.swiper',{
                    speed:500,
                    resistanceRatio : 0,//不允许边缘拖动
                    direction:'horizontal',
                    // loop:true,
                    pagination: {
                          el: '.swiper-pagination',
                          indicatorDots: true,
                    },
                    autoplay:{
                        disableOnInteraction: false,
                    },
                    observeParents:true,
                    observer:true,
                    on: {
                        init: function() {
                              resize(this);
                        },
                        resize: function() {
                              resize(this);
                        },
                        setTranslate: function() {
                              draw(this, 0.5);  //拿swiper的speed也可以,this.params.speed/1000
                        },
                    },
                    // navigation:{
                    //     nextEL:'.swiper-button-next',
                    //     prevEL:'.swiper-button-prev'
                    // },
                    // scrollbar:{
                    //     el:'.swiper-scrollbar',
                    // },
                });
              }
            
              function resize(swiper) {
                  clientWidth = document.body.clientWidth
                  clientHeight = document.body.clientHeight
                  canvas.width = clientWidth;
                  canvas.height = clientHeight;//canvas高度满屏,通过swiper container高度切割
                  for(i=0; i< Img.length; i++){
                      //图片宽度满屏时,每个图片的高度
                      Img[i].fullHeight = clientWidth/Img[i].width*Img[i].height;  
                      }
                  draw(swiper);
              }
              
              function draw(swiper, speed) {
                  //对swiper位移进行动画,并根据动画进度实时画图
                  TweenMax.to(tweenObj, speed, {translate: swiper.translate, ease: Power2.easeOut, 
                    onUpdate: function() {
                      translate = tweenObj.translate
                      //左边slide索引 
                      iLeft = Math.floor(-translate / clientWidth)
                      if(iLeft > slidesLength){//当窗口resize变小时,translate会瞬间超过最大translate导致slide不准确,因此不可超过最大slide
                          iLeft = slidesLength
                      }
            
                      //右边slide索引
                      iRight =     iLeft+1 
                      if(iRight > slidesLength){
                          iRight = slidesLength
                      }
            
                      //移动比例
                      percent = (-translate / clientWidth).toFixed(5) - iLeft
                
                      //根据左右图片和移动比例得出相应高度
                      currentHeight = (Img[iRight].fullHeight - Img[iLeft].fullHeight )*percent + Img[iLeft].fullHeight
                      
                      //画点左边宽度和画点右边位置,左边位置为0
                      drawLeft = clientWidth  + translate % clientWidth 
                      //右边宽度
                      drawRight = -translate % clientWidth
                      
                      //裁剪左边宽度
                      cutLeft = drawLeft * Img[iLeft].width / clientWidth * Img[iLeft].fullHeight /currentHeight 
                      
                      //裁剪左边位置
                      cutLeftPosition = Img[iLeft].width - cutLeft
                      
                      //裁剪右边宽度,裁剪右边位置为0
                      cutRight = drawRight * Img[iRight].width / clientWidth * Img[iRight].fullHeight / currentHeight 
                      
                      //左图裁剪
                      ctx.drawImage(Img[iLeft], cutLeftPosition, 0, cutLeft, Img[iLeft].height, 0, 0,drawLeft, currentHeight);
                      
                      //右图裁剪
                      ctx.drawImage(Img[iRight], 0, 0, cutRight, Img[iRight].height, drawLeft, 0,drawRight, currentHeight);
                      
                      swiper.el.style.height = currentHeight +'px'; //裁切高度
                    }
                  })
              }
    </script>
</body>
<style>
    
</style>
</html>


*{
    margin:0;
    padding: 0;
}
html{
    /*代表了100px=1rem*/
    font-size: 13.33333333vw;
}

/*防止大屏幕字体过大*/
@media(min-width:750px){             
    html{
        font-size: 100px;
    }
}

/*home头部*/
.home .head{
    width: 100%;
    height: 1.3rem;
    display: flex;
    background-color:rgb(7, 129, 252);
    justify-content: center;
    color: white;
    font-size: 0.44rem;
}
.home  .modules{
    width:100%;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    padding: 0.3rem 0;
}
.home .modules a{
    display: block;
    text-decoration: none;
}
.home .modules .item{
    width: 33%;
    height: 2.49rem;
    font-size: 0.3rem;
}
.home .modules .item .item-img img{
    width: 0.915rem;
    height: 0.915rem;
    background-size: 3.75rem 1.86rem;
    margin:0.2rem auto;
}
.home .foot{
    width:100%;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    padding: 0.3rem 0;
}
.home .foot .footbotten{
    width: 50%;
    height: 2.49rem;
    font-size: 0.3rem;
}
.home .foot .footbotten img{
    width: 0.615rem;
    height: 0.615rem;
    background-size: 3.75rem 1.86rem;
    margin:0.2rem auto;
}
.home .banner {
      position: relative;
      height: 30%;
      width: 100%;
      margin:0;
      padding:0;
    }
    .home .banner .swiper{
      width: 100%;
      height: 10rem;
    }
    .home .banner .swiper-slide{
      width:auto;
      height:100%;
     }
     .home .banner .swiper-slide img{
      display:block;
     }    
     .home .banner .swiper .swiper-pagination .swiper-pagination-bullet{
        width:0.5rem;
        height: 0.1rem;
        background-color: rgba(85, 246, 5, 0.6);
        opacity: 0.6;
        border-radius: 2px;
        margin:0;
        margin-bottom: -13px;
     }
     .home .banner .swiper .swiper-pagination .swiper-pagination-bullet-active{
        background-color: orange;
        opacity: 1;
     }

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2022-08-07 17:55
    关注

    v-if是重新生成dom,需要重新初话过一次swiper,就是window.onload中的代码放到一个函数里面,在显示的时候重新调用一次。比如下面这样,在v-if显示swiper的代码后面用nextTick中执行下initSwiper 。
    this.$nextTick(()=>{initSwiper () })

               function initSwiper() {
                    var swiper = new Swiper('.swiper',{
                        speed:500,
                        resistanceRatio : 0,//不允许边缘拖动
                        direction:'horizontal',
                        // loop:true,
                        pagination: {
                              el: '.swiper-pagination',
                              indicatorDots: true,
                        },
                        autoplay:{
                            disableOnInteraction: false,
                        },
                        observeParents:true,
                        observer:true,
                        on: {
                            init: function() {
                                  resize(this);
                            },
                            resize: function() {
                                  resize(this);
                            },
                            setTranslate: function() {
                                  draw(this, 0.5);  //拿swiper的speed也可以,this.params.speed/1000
                            },
                        },
                        // navigation:{
                        //     nextEL:'.swiper-button-next',
                        //     prevEL:'.swiper-button-prev'
                        // },
                        // scrollbar:{
                        //     el:'.swiper-scrollbar',
                        // },
                    });
                  }
    
     window.onload =initSwiper;
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 8月15日
  • 已采纳回答 8月7日
  • 修改了问题 8月7日
  • 创建了问题 8月7日

悬赏问题

  • ¥15 用twincat控制!
  • ¥15 请问一下这个运行结果是怎么来的
  • ¥15 单通道放大电路的工作原理
  • ¥30 YOLO检测微调结果p为1
  • ¥20 求快手直播间榜单匿名采集ID用户名简单能学会的
  • ¥15 DS18B20内部ADC模数转换器
  • ¥15 做个有关计算的小程序
  • ¥15 如何用MATLAB实现以下三个公式(有相互嵌套)
  • ¥30 关于#算法#的问题:运用EViews第九版本进行一系列计量经济学的时间数列数据回归分析预测问题 求各位帮我解答一下
  • ¥15 setInterval 页面闪烁,怎么解决