swiper 滑动切换请使用手机扫码体验

常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。

基本用法

横向无缝切换

  1. html
    <nut-swiper
  2. :paginationVisible="true"
  3. direction="horizontal"
  4. :swiperData="dataItem"
  5. ref="demo1"
  6. >
  7. <div v-for="(item,index) in dataItem" :key="index" class="nut-swiper-slide">
  8. <span>page{{item.name} }</span>
  9. </div>
  10. </nut-swiper>

横向切换

  1. html
    <nut-swiper
  2. direction="horizontal"
  3. :swiperData="dataItem"
  4. :canDragging="false"
  5. :paginationVisible="true"
  6. ref="demo2"
  7. >
  8. <div v-for="(item,index) in dataItem" :key="index" class="nut-swiper-slide">
  9. <span>page{{item.name} }</span>
  10. </div>
  11. </nut-swiper>

横向循环切换

  1. html
    <nut-swiper
  2. direction="horizontal"
  3. :loop="true"
  4. :canDragging="false"
  5. :paginationVisible="true"
  6. ref="demo3"
  7. >
  8. <div class="nut-swiper-slide gray" >
  9. <span>page 1</span>
  10. </div>
  11. <div class="nut-swiper-slide gray_1" >
  12. <span>page 2</span>
  13. </div>
  14. <div class="nut-swiper-slide gray" >
  15. <span>page 3</span>
  16. </div>
  17. <div class="nut-swiper-slide gray_1" >
  18. <span>page 4</span>
  19. </div>
  20. </nut-swiper>

纵向自动播放

  1. html
    <nut-swiper
  2. direction="vertical"
  3. :autoPlay="3000"
  4. ref="demo4"
  5. >
  6. <div class="nut-swiper-slide gray" >
  7. <span>page 1</span>
  8. </div>
  9. <div class="nut-swiper-slide gray_1" >
  10. <span>page 2</span>
  11. </div>
  12. <div class="nut-swiper-slide gray" >
  13. <span>page 3</span>
  14. </div>
  15. <div class="nut-swiper-slide gray_1" >
  16. <span>page 4</span>
  17. </div>
  18. </nut-swiper>

滑动懒加载图片

  1. html
    <nut-swiper
  2. direction="horizontal"
  3. :swiperData="dataImgItem"
  4. :lazyLoad="true"
  5. :paginationVisible="true"
  6. ref="demo5"
  7. >
  8. <div v-for="(item,index) in dataImgItem" :key="index" class="nut-swiper-slide ">
  9. <img :data-src="item.imgSrc" style="max-width:100%; max-height:100%" class="nut-img-lazyload"/>
  10. </div>
  11. </nut-swiper>
  1. javascript
    export default{
  2. data(){
  3. return{
  4. dataItem:[],
  5. dataImgItem:[],
  6. }
  7. },
  8. mounted(){
  9. setTimeout(()=>{
  10. this.dataItem = [{
  11. name:1
  12. },{
  13. name:2
  14. },{
  15. name:3
  16. },{
  17. name:4
  18. }]
  19. this.dataImgItem = [
  20. {
  21. imgSrc:'//m.360buyimg.com/mobilecms/s843x843_jfs/t19441/80/1577112624/568821/1ee9b683/5ad064f1Nf41a94b4.jpg'
  22. },
  23. {
  24. imgSrc:'//m.360buyimg.com/mobilecms/s843x843_jfs/t16798/338/1617130854/542623/4c197f4d/5ad064f1Nce5f69e2.jpg'
  25. },
  26. {
  27. imgSrc:'//m.360buyimg.com/mobilecms/s843x843_jfs/t22123/348/720079801/233727/23c4c0a4/5b162d64Nc5883413.jpg'
  28. },
  29. {
  30. imgSrc:'//m.360buyimg.com/mobilecms/s843x843_jfs/t1/27233/9/354/82863/5c090a0eEe2a350d8/aaa6686ce133e364.jpg'
  31. }
  32. ];
  33. },300)
  34. }
  35. }

Prop

字段说明类型默认值
direction滑动方向Stringvertical
paginationVisible是否分页显示Booleanfalse
paginationClickable分页是否可以点击Booleanfalse
loop是否循环Booleanfalse
speed过度动画执行时间Number500
canDragging是否无缝切换Booleantrue
autoPlay自动轮播,轮播默认是循环模式,直接写轮播间隔时间Number0
initPage设置初始时候显示的页Number1
lazyLoad是否懒加载图片Booleanfalse
lazyLoadUrl懒加载的默认展示图片String-
swiperData异步数据渲染slide时,必须绑定对应数组(v2.1.7以上支持)Array-

Methods

字段说明参数
next去下一页-
prev去上一页-
setPage设置当前显示第几页number

Events

字段说明回调参数
slideChangeStart页面开始切换时候pageSize,el
slideChangeEnd页面结束切换时候pageSize,el
slideRevertStart拖动页面没改变回到原先位置开始时候pageSize,el
slideRevertEnd拖动页面没有改变回到原先位置结束时候pageSize,el
slideMove拖动过程中offset,el

Swiper 滑动切换 - 图1