Swiper中文论坛

标题: 关于.swiper-container不紧挨body引发的问题 [打印本页]
作者: 实习战地记者    时间: 2016-3-18 09:52
标题: 关于.swiper-container不紧挨body引发的问题
本帖最后由 实习战地记者 于 2016-3-18 10:09 编辑

是这样的，最近在做一个像朋友圈那样子的垂直方向滑动浏览内容的功能。我知道只要.swiper-container紧挨着body，一切都会正常。但是因为项目结构的原因，被下拉的那部分（.swiper-container）一定得被多层div所包裹，无法紧挨着body，这种情况下出现了    手指上滑，页面无法向下继续滑动（会回弹）    的问题。下面这个是正常的效果
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <link rel="stylesheet" href="swiper-3.3.1.min.css">
  6. <meta name="viewport" content="width=device-width">
  7. <style>
  8. html {
  9.         height: 100%;
  10. }
  11. body {
  12.         margin: 0;

  14.         height: 100%;
  15.         background: #333;
  16.         box-shadow: 0px 0px 100px #000 inset;
  17. }
  18. .swiper-container{
  19.   width:100%;
  20.   height: 100%;
  21.   background-color: #BBB;
  22. }
  23. .swiper-wrapper{
  24.   width:100%;
  25.   height: 100%;
  26. }
  27. .swiper-slide{
  28.    width:100%;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33.     <div class="swiper-container">
  34.       <div class="swiper-wrapper">
  35.         <div class="swiper-slide slide1" style="height:120px; background-color:#E18F8F;">
  36.           1
  37.         </div>
  38.         <div class="swiper-slide slide2" style=" height:100px;background-color:#55A92E;">
  39.           2
  40.         </div>
  41.         <div class="swiper-slide slide3" style="background-color:#E6DB5A;height: 1000px;">
  42.          3
  43.         </div>
  44.       </div>
  45.     </div>
  46. <script src="jquery-1.10.1.min.js"></script>
  47. <script src="swiper-3.3.1.jquery.min.js"></script>
  48. <script>
  49.   var swiper = new Swiper('.swiper-container', {
  50.     direction : 'vertical',
  51.     slidesPerView:'auto',
  52.     resistance:0,
  53.     onTouchEnd: function(swiper){
  54.       if(swiper.translate>0){
  55.         console.log('refresh!');
  56.         //document.getElementById('show').innerHTML='刷新中';
  57.       }
  58.     }
  59.   });
  60. </script>
  61. </body>
  62. </html>
复制代码

下面这个是出问题的，与上面的区别仅在于.swiper-container外多了一层div，我希望可以在下面这种结构上实现上面的效果，即上滑可以浏览后面的内容，求大神指点指点
  1. <body>
  2.   <div>
  3.     <div class="swiper-container">
  4.       <div class="swiper-wrapper">
  5.         <div class="swiper-slide slide1" style="height:120px; background-color:#E18F8F;">
  6.           1
  7.         </div>
  8.         <div class="swiper-slide slide2" style=" height:100px;background-color:#55A92E;">
  9.           2
  10.         </div>
  11.         <div class="swiper-slide slide3" style="background-color:#E6DB5A;height: 1000px;">
  12.          3
  13.         </div>
  14.       </div>
  15.     </div>
  16.   </div>
  17. <script src="jquery-1.10.1.min.js"></script>
  18. <script src="swiper-3.3.1.jquery.min.js"></script>
  19. <script>
  20.   var swiper = new Swiper('.swiper-container', {
  21.     direction : 'vertical',
  22.     slidesPerView:'auto',
  23.     resistance:0,
  24.     onTouchEnd: function(swiper){
  25.       if(swiper.translate>0){
  26.         console.log('refresh!');
  27.         //document.getElementById('show').innerHTML='刷新中';
  28.       }
  29.     }
  30.   });
  31. </script>
  32. </body>
复制代码




作者: 实习战地记者    时间: 2016-3-18 10:16
在第二段代码中我发现只要swiper-container继承到html根元素的 height:100% 貌似就可以了，但在我的项目里好像还是不行...我继续再研究一下吧
作者: CharlesRan    时间: 2021-10-3 14:43
老哥，研究出来了吗



欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2