Swiper中文论坛

标题: 页面滑动出现无限右滑谷歌开发模式没问题真机测试产生BUG [打印本页]
作者: 新人学习中    时间: 2018-7-26 10:47
标题: 页面滑动出现无限右滑谷歌开发模式没问题真机测试产生BUG
  1. <style>
  2.   .swiper-container {
  3.       width: 100%;
  4.       height:2.93rem;
  5.     }
  6.     .swiper-slide {
  7.       text-align: center;
  8.       font-size: 0.18rem;
  9.       background: #AEAEAE;
  10.       width: 1.83rem !important;
  11.       height: 1.72rem;
  12.       border-radius: 0.3rem;
  13.       margin-top: 0.4rem;
  14.       /*/* Center slide text vertically */
  15.      display: -webkit-box;
  16.       display: -ms-flexbox;
  17.       display: -webkit-flex;
  18.       display: flex;
  19.       -webkit-box-pack: center;
  20.       -ms-flex-pack: center;
  21.       -webkit-justify-content: center;
  22.       justify-content: center;
  23.       -webkit-box-align: center;
  24.       -ms-flex-align: center;
  25.       -webkit-align-items: center;
  26.       align-items: center;
  27.     }
  28.     .swiper-slide div{
  29.             position: absolute;
  30.             width: 2rem;
  31.             height: 0.8rem;
  32.             margin-left: -1rem;
  33.             left: 50%;
  34.             top: 1.9rem;
  35.             font-size: 0.25rem;

  37.     }
  38. </style>

  40. <body>
  41.                 <div class="swiper-container">
  42.         <div class="swiper-wrapper">
  43.       <div class="swiper-slide">Slide 1
  44.               <div><b>￥</b>199.00</div>
  45.       </div>
  46.       <div class="swiper-slide">Slide 2
  47.               <div><b>￥</b>199.00</div>
  48.       </div>
  49.       <div class="swiper-slide">Slide 3
  50.               <div><b>￥</b>199.00</div>
  51.       </div>
  52.       <div class="swiper-slide">Slide 4
  53.         <div><b>￥</b>199.00</div>
  54.       </div>
  55.       <div class="swiper-slide">Slide 5
  56.               <div><b>￥</b>199.00</div>
  57.       </div>
  58.       <div class="swiper-slide">Slide 6
  59.         <div><b>￥</b>199.00</div>
  60.       </div>
  61.       <div class="swiper-slide">Slide 7
  62.         <div><b>￥</b>199.00</div>
  63.       </div>
  64.       <div class="swiper-slide">Slide 8
  65.         <div><b>￥</b>199.00</div>
  66.       </div>     
  67.       <div class="swiper-slide">Slide 9
  68.         <div><b>￥</b>199.00</div>
  69.       </div>
  70.       <div class="swiper-slide">Slide 10
  71.         <div><b>￥</b>199.00</div>
  72.       </div>
  73.     </div>       
  74.     </div>
  75. </body>
  76. <scrpit>
  77. var swiper = new Swiper('.swiper-container', {         
  78.     slidesOffsetBefore :8,
  79.     spaceBetween : 20,
  80.     autowidth: true,
  81.     autoheigh:true,
  82.     loop:true,
  83.         paginationClickable: true,
  84.     });
  85. </script>
复制代码


作者: 新人学习中    时间: 2018-7-26 14:33
求大神解决方案



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