查看: 2806|回复: 2
打印 上一主题 下一主题

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

[复制链接]

该用户从未签到

3

主题

8

帖子

110

积分

注册会员

Rank: 2

积分
110
跳转到指定楼层
楼主
发表于 2016-3-18 09:52:19 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
本帖最后由 实习战地记者 于 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;

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




分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 分享淘帖
回复

使用道具 举报

该用户从未签到

3

主题

8

帖子

110

积分

注册会员

Rank: 2

积分
110
沙发
 楼主| 发表于 2016-3-18 10:16:56 | 只看该作者
在第二段代码中我发现只要swiper-container继承到html根元素的 height:100% 貌似就可以了,但在我的项目里好像还是不行...我继续再研究一下吧
回复 支持 反对

使用道具 举报

该用户从未签到

1

主题

2

帖子

4

积分

新手上路

Rank: 1

积分
4
板凳
发表于 2021-10-3 14:43:31 | 只看该作者
老哥,研究出来了吗
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

GMT+8, 2024-6-16 04:53 , Processed in 0.099775 second(s), 27 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表