关于.swiper-container不紧挨body引发的问题
本帖最后由 实习战地记者 于 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>
在第二段代码中我发现只要swiper-container继承到html根元素的 height:100% 貌似就可以了，但在我的项目里好像还是不行...我继续再研究一下吧 老哥，研究出来了吗:lol
页:
[1]