刚接触前端。使用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;
}
