关于.swiper-container不紧挨body引发的问题

实习战地记者 · 发表于 2016-3-18 09:52:19

本帖最后由实习战地记者于 2016-3-18 10:09 编辑

是这样的，最近在做一个像朋友圈那样子的垂直方向滑动浏览内容的功能。我知道只要.swiper-container紧挨着body，一切都会正常。但是因为项目结构的原因，被下拉的那部分（.swiper-container）一定得被多层div所包裹，无法紧挨着body，这种情况下出现了 手指上滑，页面无法向下继续滑动（会回弹） 的问题。下面这个是正常的效果

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="swiper-3.3.1.min.css">
<meta name="viewport" content="width=device-width">
<style>
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
background: #333;
box-shadow: 0px 0px 100px #000 inset;
}
.swiper-container{
width:100%;
height: 100%;
background-color: #BBB;
}
.swiper-wrapper{
width:100%;
height: 100%;
}
.swiper-slide{
width:100%;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide slide1" style="height:120px; background-color:#E18F8F;">
1
</div>
<div class="swiper-slide slide2" style=" height:100px;background-color:#55A92E;">
2
</div>
<div class="swiper-slide slide3" style="background-color:#E6DB5A;height: 1000px;">
3
</div>
</div>
</div>
<script src="jquery-1.10.1.min.js"></script>
<script src="swiper-3.3.1.jquery.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
direction : 'vertical',
slidesPerView:'auto',
resistance:0,
onTouchEnd: function(swiper){
if(swiper.translate>0){
console.log('refresh!');
//document.getElementById('show').innerHTML='刷新中';
}
}
});
</script>
</body>
</html>

复制代码

下面这个是出问题的，与上面的区别仅在于.swiper-container外多了一层div，我希望可以在下面这种结构上实现上面的效果，即上滑可以浏览后面的内容，求大神指点指点

<body>
<div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide slide1" style="height:120px; background-color:#E18F8F;">
1
</div>
<div class="swiper-slide slide2" style=" height:100px;background-color:#55A92E;">
2
</div>
<div class="swiper-slide slide3" style="background-color:#E6DB5A;height: 1000px;">
3
</div>
</div>
</div>
</div>
<script src="jquery-1.10.1.min.js"></script>
<script src="swiper-3.3.1.jquery.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
direction : 'vertical',
slidesPerView:'auto',
resistance:0,
onTouchEnd: function(swiper){
if(swiper.translate>0){
console.log('refresh!');
//document.getElementById('show').innerHTML='刷新中';
}
}
});
</script>
</body>

复制代码

实习战地记者 · 发表于 2016-3-18 10:16:56

在第二段代码中我发现只要swiper-container继承到html根元素的 height:100% 貌似就可以了，但在我的项目里好像还是不行...我继续再研究一下吧

CharlesRan · 发表于 2021-10-3 14:43:31

老哥，研究出来了吗