swper3.4.2 多加一层div包裹元素高度计算错误

duowhite · 发表于 2017-11-29 17:45:40

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Progress演示，志玲姐姐 - swiper中文网</title>
<meta name="viewport" content="initial-scale=1">
<!--<link rel="stylesheet" href="../../dist/css/swiper.min.css">
<script src="../../dist/js/swiper.min.js"></script>-->
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
html,body,.swiper-container,.swiper-slide{
height:100%;}
.swiper-slide {
overflow:hidden;
}
.swiper-slide img{
width:100%;
}
</style>
</head>
<body>
<div style="max-width:640px; margin:0 auto; height:100%;">
<div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/zhiling1.jpg" ></div>
<div class="swiper-slide"><img src="img/zhiling2.jpg" ></div>
<div class="swiper-slide"><img src="img/zhiling3.jpg" ></div>
<div class="swiper-slide"><img src="img/zhiling4.jpg" ></div>
</div>
</div>
</div>
</div>
<script type = "text/javascript">
var mySwiper = new Swiper('.swiper-container', {
direction: 'vertical',
mousewheelControl: true,
watchSlidesProgress: true,
onInit: function(swiper) {
swiper.myIndex = 0;//activeIndex在滑动到一半时会切换，改用滑动完再切换的myIndex
},
onProgress: function(swiper) {
for (var i = 0; i < swiper.slides.length; i++) {
var slide=swiper.slides.eq(i);
var progress = swiper.slides[i].progress;
var translate, boxShadow;
translate = progress * swiper.height * 0.8;
scale = 1 - Math.min(Math.abs(progress * 0.2), 1);
if (i == swiper.myIndex) {
slide.transform('translate3d(0,' + (translate) + 'px,0) scale(' + scale + ')');
slide.css({'z-index':0,'boxShadow':'0px 0px 10px rgba(0,0,0,.5)'});
}
}
},
onTransitionEnd: function(swiper) {
swiper.myIndex = swiper.activeIndex;
for (var i = 0; i < swiper.slides.length; i++) {
var slide=swiper.slides.eq(i);
slide.transform('');
slide.css('z-index',1);
}
swiper.enableMousewheelControl();
//swiper.enableTouchControl();
},
onSetTransition: function(swiper, speed) {
for (var i = 0; i < swiper.slides.length; i++) {
var slide=swiper.slides.eq(i);
slide.transition(speed + 'ms');
}
swiper.disableMousewheelControl();
//swiper.disableTouchControl();
}
});
</script>
</body>
</html>

复制代码

官方志玲阿姨的例子

多包一层DIV后

swiper加载完

每个swiper-slide的div元素的高度会计算错误！

如图会计算出超过很多的高度出来

虽然界面展示还是没问题，但是效果还是打了个折扣

交流下灵异事件

swper3.4.2 多加一层div包裹 元素高度计算错误

浏览过的版块

swper3.4.2 多加一层div包裹元素高度计算错误