Swiper

轮播组件，支持滑动。

示例
横向切换
  1. <nut-swiper
  2.    :pagination-visible="true"
  3.    direction="horizontal"
  4.    :performanceMode="true"
  5.    ref="demo1"
  6.    @slideChangeEnd="slideChangeEnd">
  7.     <div v-for="item in dataItem" class="nut-swiper-slide"><span>page{{item.name}}</span></div>
  8. </nut-swiper>

纵向切换
  1. <nut-swiper
  2.     :pagination-visible="false"
  3.     :performanceMode="true"
  4.     direction="vertical">
  5.     <div class="nut-swiper-slide"><span>page 1</span></div>
  6.     <div class="nut-swiper-slide"><span>page 2</span></div>
  7.     <div class="nut-swiper-slide"><span>page 3</span></div>
  8. </nut-swiper>

无缝切换
  1. <nut-swiper
  2.     :pagination-visible="true"
  3.     @slideChangeEnd="slideChangeEnd"
  4.     @slideChangeStart="slideChangeStart"
  5.     direction="horizontal">
  6.     <div class="nut-swiper-slide"><span>page 1</span></div>
  7.     <div class="nut-swiper-slide"><span>page 2</span></div>
  8.     <div class="nut-swiper-slide"><span>page 3</span></div>
  9. </nut-swiper>

循环切换
  1. <nut-swiper
  2.     :pagination-visible="true"
  3.     :loop="true"
  4.     direction="horizontal">
  5.     <div class="nut-swiper-slide"><span>page 1</span></div>
  6.     <div class="nut-swiper-slide"><span>page 2</span></div>
  7.     <div class="nut-swiper-slide"><span>page 3</span></div>
  8. </nut-swiper>

自动切换
  1. <nut-swiper
  2.     :pagination-visible="false"
  3.     :autoPlay="1000"
  4.     direction="vertical">
  5.     <div class="nut-swiper-slide"><span>page 1</span></div>
  6.     <div class="nut-swiper-slide"><span>page 2</span></div>
  7.     <div class="nut-swiper-slide"><span>page 3</span></div>
  8. </nut-swiper>

懒加载切换
  1. <nut-swiper
  2.     :pagination-visible="false"
  3.     direction="horizontal"
  4.     id="nutSwiperLazyLoad"
  5.     :lazyLoad="true"
  6.     lazyLoadingUrl="//static.360buyimg.com/exploit/mplus/2.1.81/css/i/loading.gif"
  7.     lazyLoaderrorUrl="">
  8.     <div class="nut-swiper-slide">
  9.       <div>
  10.         <img data-src="//img11.360buyimg.com/n3/s300x300_jfs/t2029/269/1342378600/94347/c088416b/56581d53Ne97b6442.jpg" class="nut-swiper-lazyload"/>
  11.         <p>牙膏牙膏吃牙膏</p>
  12.       </div>
  13.       <div>
  14.         <img data-src="//img11.360buyimg.com/n3/s300x300_jfs/t5944/284/7637282290/291307/34ae9129/597ed721N4d9a0e73.jpg" class="nut-swiper-lazyload"/>
  15.         <p>纯正白砂糖，味甜</p>
  16.       </div>
  17.       <div>
  18.         <img data-src="//img11.360buyimg.com/n3/s300x300_jfs/t9604/129/1427755970/357543/ba77f0be/59e071fcN4a3e077d.jpg" class="nut-swiper-lazyload"/>
  19.         <p>妙洁 保鲜袋背心型食品袋中号200只装 可提携易打结</p>
  20.       </div>
  21.     </div>
  22.     <div class="nut-swiper-slide">
  23.       <div>
  24.         <img data-src="//img11.360buyimg.com/n3/s300x300_jfs/t3826/185/3277282028/320781/8fbf1015/587c2fcaNc3741a59.jpg" class="nut-swiper-lazyload"/>
  25.         <p>全棉灭菌免换洗</p>
  26.       </div>
  27.       <div>
  28.         <img data-src="//img11.360buyimg.com/n3/s300x300_jfs/t6028/28/1573357626/422743/9b98f679/5934c6c9N03afe631.jpg" class="nut-swiper-lazyload"/>
  29.         <p>锁定厨房油污0</p>
  30.       </div>
  31.       <div>
  32.         <img data-src="//img11.360buyimg.com/n3/s300x300_jfs/t4792/130/2443359129/122816/5f47cbd2/58ff20ecN49be8a01.jpg" class="nut-swiper-lazyload"/>
  33.         <p>训练宝宝咀嚼力</p>
  34.       </div>
  35.     </div>
  36.     <div class="nut-swiper-slide">
  37.       <div>
  38.         <img data-src="//img11.360buyimg.com/n3/s300x300_jfs/t13924/18/765396019/118800/71bda7ea/5a13878fN35292d9b.jpg" class="nut-swiper-lazyload"/>
  39.         <p>得力(deli)S01黑色0.5mm经典办公按动中性笔水性笔子弹头签字笔 12支/盒</p>
  40.       </div>
  41.       <div>
  42.         <img data-src="//img11.360buyimg.com/n3/s300x300_jfs/t4231/114/1373063995/311341/1feeaaad/58c1000cN5c448e8d.jpg" class="nut-swiper-lazyload"/>
  43.         <p>台湾蛋黄味糙米卷</p>
  44.       </div>
  45.       <div>
  46.         <img data-src="//img11.360buyimg.com/n3/s300x300_jfs/t2005/197/1846980340/247407/fcdbd278/56e0ceffN1d106bdb.jpg" class="nut-swiper-lazyload"/>
  47.         <p>柔韧耐用，保鲜安全</p>
  48.       </div>
  49.     </div>
  51. </nut-swiper>

事件
  1. export default {
  2.     data(){
  3.         return{
  4.          dataItem:null,
  5.          move:1,
  6.         }
  7.     },
  8.     methods:{
  9.      slideChangeStart:function(currentPage,el,type){
  10.       console.log(type);
  12.      },
  13.      slideChangeEnd:function(currentPage,el){
  14.         console.log(currentPage);
  15.      },
  17.     },
  18.     mounted:function(){
  20.       setTimeout(()=>{
  21.         this.dataItem=[{"name":1},{"name":2},{"name":3},{"name":4},{"name":5},{"name":6}];
  22.         this.$refs.demo1.updateSlidesBindEvent(2);
  23.       },300);
  24.     }
  25. }

Props
参数说明类型默认值可选值
directionswiper滑动方向String"vertical""vertical"/"horizontal"
paginationVisible分页显示与否Booleantruetrue/false
paginationClickable分页是否可以点击Booleantruetrue/false
loop是否循环Booleantruetrue/false
speed过渡动画执行时间Number500—
autoPlay自动轮播，轮播默认是循环模式Boolean0—
lazyLoad图片是否支持lazyload加载，默认是 不lazyloadBooleanfalseflase/true
lazyLoadingurlloading图片urlString'STATIC/loading.gif'—
lazyLoaderrorUrlloading图片出错时候垫底图String''—
freeMode自由切换模式Booleanfalseflase/true
initPage设置初始时候显示的页Number1—
type切换的模式，单个切换，还是自由切换（自动贴合）String'single''single/multiple'
Methods
方法名说明参数
next去下一页—
prev去上一页—
setPage设置显示当前页码页pageNumber
updateSlidesBindEvent如果动态更新slides，可以重新调用updateSlidesEvent 绑定事件,在异步函数赋值之后，重新绑定，绑定的方法：在nut-swiper上加一个ref="demo1",在函数中用this.$refs.demo1.updateSlidesBindEvent(pageSize) 重新绑定事件 ,pageSize 可以在更新bind后，重新设置pageSizepageSize
Events
事件名说明回调参数
slideChangeStart改变页开始时回调函数pageNumber,el
slideChangeEnd改变页时回调函数pageNumber,el
slideRevertStart拖动没有改变页时开始时回调函数pageNumber,el
slideRevertEnd拖动没有改变页结束时回调函数pageNumber,el
slideMove拖动过程中的回调函数offset,el