Swiper 轮播

Scan me!

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

引入

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

代码演示

横向轮播 Goto 2PlayStop

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

渐隐轮播 Goto 2

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

每屏多内容 Goto 2

复杂结构，每屏显示一组多条内容
@before-change: from: 1, to: 2@after-change: from: 1, to: 2
  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" scoped>
  59. .md-example-child
  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, fade
default-index第一屏面板索引值Number0[0, length - 1]
has-dots控制面板指示点Booleantrue-
is-prevent是否阻止默认的事件，如页面滚动事件Booleantrue为swiper-item绑定点击事件需将其设置为false
is-loop是否循环播放Booleantrue-
dragable是否禁用触摸滑动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]
  1. vm.$refs.swiper.goto(2)
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