事实上不太适合做上拉刷新和下拉加载
官方地址
http://idangero.us/swiper
demo
http://idangero.us/swiper/demos/#.V5YV4_mF4dU
API手册
http://idangero.us/swiper/api/
新手教学
http://idangero.us/swiper/get-started/#.V5YXKfmF4dU
脚手架
<!DOCTYPE html> <html lang="en"> <head> <link href="http://cdn.bootcss.com/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet" /> </head> <body>
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script><script src="http://cdn.bootcss.com/Swiper/3.3.1/js/swiper.jquery.min.js"></script></body> </html>
实战demo
<!DOCTYPE html> <html lang="en"> <meta charset="utf-8"> <head> <link href="http://cdn.bootcss.com/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet" /> </head> <style type="text/css"> .swiper-container, html, body { position: relative; height: 100%; } body { background: #fff; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color:#000; margin: 0; padding: 0; } .swiper-container { width: 100%; height: 100%; } .swiper-slide { font-size: 18px; height: auto; -webkit-box-sizing: border-box; box-sizing: border-box; } </style> <body> <!-- Slider main container --> <div class="swiper-container"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- 轮播图 --> <!-- <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> --> <div class="swiper-scrollbar"></div> </div> <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/Swiper/3.3.1/js/swiper.jquery.min.js"></script> <script> $(function() { var isLoader = false; var mySwiper = new Swiper('.swiper-container', { /* 垂直方向 */ direction: 'vertical', /* 每次滑动或者显示的数量 */ slidesPerView: 10, /* 是否允许滑轮滚动 */ mousewheelControl: true, /* 是否无限循环 */ loop: false, /* 自由模式 */ freeMode: true, /* 分页 */ // pagination: '.swiper-pagination', /* 上一页按钮 */ // nextButton: '.swiper-button-next', /* 下一页按钮 */ // prevButton: '.swiper-button-prev', /* 滚动条 */ scrollbar: '.swiper-scrollbar', // 滚动到顶部事件(页面加载时会触发) onReachBeginning: function() { console.log("Reach Begin"); }, // 滚动到顶部事件(页面加载时,如果数目太少会触发) onReachEnd: function() { mySwiper.slideTo(0, 1000, function(){console.log("done")}); if (isLoader == false) { /* 加载中 */ mySwiper.appendSlide("<div class='swiper-slide'>数据加载中...</div>"); isLoader = true; /*暂时加锁,等数据加载完成之后再解锁更改为false } } }) }) </script> </body> </html>