Swiper 轮播

Scan me!

走马灯，用于一组图片或卡片轮播

引入

  1. import { Swiper, SwiperItem } from 'mand-mobile'
  3. Vue.component(Swiper.name, Swiper)
  4. Vue.component(SwiperItem.name, SwiperItem)

代码演示

横向轮播 Goto 2PlayStop

10秒后异步加载更多项，20秒后重置为初始数量
@before-change: from: 0, to: 1@after-change: from: 0, to: 1

Swiper 轮播 - 图2

  1.         <template>
  2.   <div class="md-example-child md-example-child-swiper md-example-child-swiper-0">
  3.     <md-swiper
  4.       @before-change="beforeChange"
  5.       @after-change="afterChange"
  6.       ref="swiper"
  7.       :is-prevent="false"
  8.       :useNative-driver="false"
  9.     >
  10.       <md-swiper-item :key="$index" v-for="(item, $index) in simple">
  11.         <div
  12.           class="banner-item"
  13.           :style="{'background': `${item.color}`}">{{item.text}}</div>
  14.       </md-swiper-item>
  15.     </md-swiper>
  16.   </div>
  17. </template>
  19. <script>
  20. import {Swiper, SwiperItem} from 'mand-mobile'
  21. import simple from 'mand-mobile/components/swiper/demo/data/simple'
  23. export default {
  24.   name: 'swiper-demo',
  25.   components: {
  26.     [Swiper.name]: Swiper,
  27.     [SwiperItem.name]: SwiperItem,
  28.   },
  29.   data() {
  30.     return {
  31.       simple,
  32.     }
  33.   },
  34.   mounted() {
  35.     // Simulation of asynchronous
  36.     setTimeout(() => {
  37.       this.simple = simple.concat(simple)
  38.     }, 10000)
  39.     // Simulation of asynchronous
  40.     setTimeout(() => {
  41.       this.simple = simple
  42.     }, 24500)
  43.     window.triggerSwiper0 = () => {
  44.       this.goto()
  45.     }
  46.     window.triggerSwiper1 = () => {
  47.       this.play()
  48.     }
  49.     window.triggerSwiper2 = () => {
  50.       this.stop()
  51.     }
  52.   },
  53.   methods: {
  54.     setValue(id, value) {
  55.       document.querySelector(id) && (document.querySelector(id).innerHTML = value)
  56.     },
  57.     beforeChange(from, to) {
  58.       this.setValue('#valueSwiper0', from)
  59.       this.setValue('#valueSwiper1', to)
  60.     },
  61.     afterChange(from, to) {
  62.       this.setValue('#valueSwiper2', from)
  63.       this.setValue('#valueSwiper3', to)
  64.     },
  65.     fn(index) {
  66.       this.setValue('#valueSwiper4', index)
  67.     },
  68.     goto() {
  69.       this.$refs.swiper.goto(2)
  70.     },
  71.     play() {
  72.       this.$refs.swiper.play()
  73.     },
  74.     stop() {
  75.       this.$refs.swiper.stop()
  76.     },
  77.   },
  78. }
  80. </script>
  82. <style lang="stylus">
  83. .md-example-child-swiper-0
  84.   height 250px
  85.   .banner-item
  86.     float left
  87.     width 100%
  88.     height 100%
  89.     line-height 250px
  90.     text-align center
  91.     font-size 28px
  92.     color #FFF
  93.     box-align center
  94.     align-items center
  95.     box-pack center
  96.     justify-content center
  97.     text-decoration-line none
  98. </style>
  99.  
  100.

渐隐轮播 Goto 2

@before-change: from: 0, to: 0@after-change: from: 0, to: 0

Swiper 轮播 - 图3

  1.         <template>
  2.   <div class="md-example-child md-example-child-swiper md-example-child-swiper-2">
  3.     <md-swiper
  4.       @before-change="beforeChange"
  5.       @after-change="afterChange"
  6.       :autoplay="5000"
  7.       transition="fade"
  8.       ref="swiper">
  9.       <md-swiper-item :key="$index" v-for="(item, $index) in simple">
  10.         <a href="javascript:void(0)"
  11.           class="banner-item"
  12.           :style="{'background': `${item.color}`}">{{item.text}}</a>
  13.       </md-swiper-item>
  14.     </md-swiper>
  15.   </div>
  16. </template>
  18. <script>
  19. import {Swiper, SwiperItem} from 'mand-mobile'
  20. import simple from 'mand-mobile/components/swiper/demo/data/simple'
  22. export default {
  23.   name: 'swiper-demo',
  24.   components: {
  25.     [Swiper.name]: Swiper,
  26.     [SwiperItem.name]: SwiperItem,
  27.   },
  28.   data() {
  29.     return {
  30.       simple,
  31.     }
  32.   },
  33.   mounted() {
  34.     window.triggerSwiper3 = () => {
  35.       this.goto()
  36.     }
  37.   },
  38.   methods: {
  39.     setValue(id, value) {
  40.       document.querySelector(id) && (document.querySelector(id).innerHTML = value)
  41.     },
  42.     beforeChange(from, to) {
  43.       this.setValue('#valueSwiper10', from)
  44.       this.setValue('#valueSwiper11', to)
  45.     },
  46.     afterChange(from, to) {
  47.       this.setValue('#valueSwiper12', from)
  48.       this.setValue('#valueSwiper13', to)
  49.     },
  50.     goto() {
  51.       this.$refs.swiper.goto(2)
  52.     },
  53.   },
  54. }
  56. </script>
  58. <style lang="stylus">
  59. .md-example-child-swiper-2
  60.   height 250px
  61.   .banner-item
  62.     float left
  63.     width 100%
  64.     height 100%
  65.     line-height 250px
  66.     text-align center
  67.     font-size 28px
  68.     color #FFF
  69.     box-align center
  70.     align-items center
  71.     box-pack center
  72.     justify-content center
  73.     text-decoration-line none
  74. </style>
  75.  
  76.

纵向轮播

纵向，默认显示第2屏（index 1），不显示导航点，不可拖动，滚动间隔为5秒
@before-change: from: 0, to: 0@after-change: from: 0, to: 0

Swiper 轮播 - 图4

  1.         <template>
  2.   <div class="md-example-child md-example-child-swiper md-example-child-swiper-1">
  3.     <md-swiper
  4.       @before-change="beforeChange"
  5.       @after-change="afterChange"
  6.       :default-index="1"
  7.       :dragable="false"
  8.       :autoplay="5000"
  9.       transition="slideY">
  10.       <md-swiper-item :key="$index" v-for="(item, $index) in simple">
  11.         <a href="javascript:void(0)"
  12.           class="banner-item"
  13.           :style="{'background': `${item.color}`}">{{item.text}}</a>
  14.       </md-swiper-item>
  15.     </md-swiper>
  16.   </div>
  17. </template>
  19. <script>
  20. import {Swiper, SwiperItem} from 'mand-mobile'
  21. import simple from 'mand-mobile/components/swiper/demo/data/simple'
  23. export default {
  24.   name: 'swiper-demo',
  25.   components: {
  26.     [Swiper.name]: Swiper,
  27.     [SwiperItem.name]: SwiperItem,
  28.   },
  29.   data() {
  30.     return {
  31.       simple,
  32.     }
  33.   },
  34.   methods: {
  35.     setValue(id, value) {
  36.       document.querySelector(id) && (document.querySelector(id).innerHTML = value)
  37.     },
  38.     beforeChange(from, to) {
  39.       this.setValue('#valueSwiper5', from)
  40.       this.setValue('#valueSwiper6', to)
  41.     },
  42.     afterChange(from, to) {
  43.       this.setValue('#valueSwiper7', from)
  44.       this.setValue('#valueSwiper8', to)
  45.     },
  46.   },
  47. }
  49. </script>
  51. <style lang="stylus">
  52. .md-example-child-swiper-1
  53.   height 250px
  54.   .banner-item
  55.     float left
  56.     width 100%
  57.     height 100%
  58.     line-height 250px
  59.     text-align center
  60.     font-size 28px
  61.     color #FFF
  62.     box-align center
  63.     align-items center
  64.     box-pack center
  65.     justify-content center
  66.     text-decoration-line none
  67. </style>
  68.  
  69.

每屏多内容 Goto 2

复杂结构，每屏显示一组多条内容
@before-change: from: 0, to: 1@after-change: from: 0, to: 1

Swiper 轮播 - 图5

  1.         <template>
  2.   <div class="md-example-child md-example-child-swiper md-example-child-swiper-3">
  3.     <md-swiper
  4.       @before-change="beforeChange"
  5.       @after-change="afterChange"
  6.       ref="swiper">
  7.       <md-swiper-item :key="$index" v-for="(item, $index) in mulit">
  8.         <ul>
  9.           <li :key="$index1" v-for="(sub, $index1) in item">
  10.             <a href="javascript:void(0)" class="banner-item" :style="{'background': `${sub.color}`}">{{sub.text}}</a>
  11.           </li>
  12.         </ul>
  13.       </md-swiper-item>
  14.     </md-swiper>
  15.   </div>
  16. </template>
  18. <script>
  19. import {Swiper, SwiperItem} from 'mand-mobile'
  20. import mulit from 'mand-mobile/components/swiper/demo/data/mulit-item'
  22. export default {
  23.   name: 'swiper-demo',
  24.   components: {
  25.     [Swiper.name]: Swiper,
  26.     [SwiperItem.name]: SwiperItem,
  27.   },
  28.   data() {
  29.     return {
  30.       mulit,
  31.     }
  32.   },
  33.   mounted() {
  34.     window.triggerSwiper4 = () => {
  35.       this.goto()
  36.     }
  37.   },
  38.   methods: {
  39.     setValue(id, value) {
  40.       document.querySelector(id) && (document.querySelector(id).innerHTML = value)
  41.     },
  42.     beforeChange(from, to) {
  43.       this.setValue('#valueSwiper15', from)
  44.       this.setValue('#valueSwiper16', to)
  45.     },
  46.     afterChange(from, to) {
  47.       this.setValue('#valueSwiper17', from)
  48.       this.setValue('#valueSwiper18', to)
  49.     },
  50.     goto() {
  51.       this.$refs.swiper.goto(2)
  52.     },
  53.   },
  54. }
  56. </script>
  58. <style lang="stylus">
  59. .md-example-child-swiper-3
  60.   height 250px
  61.   li
  62.     list-style none
  63.     float left
  64.     width 33%
  65.     height 125px
  66.   .banner-item
  67.     float left
  68.     width 100%
  69.     height 100%
  70.     line-height 125px
  71.     text-align center
  72.     font-size 28px
  73.     color #FFF
  74.     box-align center
  75.     align-items center
  76.     box-pack center
  77.     justify-content center
  78.     text-decoration-line none
  79. </style>
  80.  
  81.

API

Swiper Props

属性说明类型默认值可选值/备注
autoplay自动切换间隔时长(毫秒), 禁用可设置为0Number30000, [500, +Int.Max)
transition面板切换动画效果Stringslideslide, slideY, fade
transition-duration面板切换动画时长Number250单位ms
default-index第一屏面板索引值Number0[0, length - 1]
has-dots控制面板指示点Booleantrue-
is-prevent阻止默认的事件，如页面滚动事件Booleantrue为swiper-item绑定点击事件需将其设置为false
is-loop循环播放Booleantrue-
dragable禁用触摸滑动Booleantrue-
use-native-driver开启3D加速Booleantrue-

Swiper Methods

play(autoplay)

打开自动切换

参数说明类型默认值可选值
autoplay自动切换间隔时长(毫秒)Number3000[500, +Int.Max)
  1. vm.$refs.swiper.play(5000)
stop()

停止自动切换

  1. vm.$refs.swiper.stop()
prev()

前一个item

  1. vm.$refs.swiper.prev()
next()

后一个item

  1. vm.$refs.swiper.next()
goto(index)

切换到某一个index

参数说明类型默认值可选值
index面板索引值Number0[0, length - 1]
js</td><td></td><td></td><td></td><td></td></tr><tr><td>vm.$refs.swiper.goto(2)</td><td></td><td></td><td></td><td></td></tr><tr><td>
getIndex()

获取当前显示的index

参数说明类型
index当前显示的indexNumber
  1. var index = vm.$refs.swiper.getIndex()

Swiper Events

@beforeChange(from, to)

轮播器将要切换前的事件

参数说明类型
from轮播器当前展示的索引值Number
to轮播器下一屏展示的索引值Number
@afterChange(from, to)

轮播器切换完成时的事件

参数说明类型
from轮播器当前展示的索引值Number
to轮播器下一屏展示的索引值Number