Swiper 轮播 - 《Mand Mobile v2.x 组件文档》

引入
代码演示
- 横向轮播 Goto 2PlayStop
  - 10秒后异步加载更多项，20秒后重置为初始数量
  - @before-change: from: 0, to: 1@after-change: from: 0, to: 1
- 渐隐轮播 Goto 2
  - @before-change: from: 0, to: 0@after-change: from: 0, to: 0
- 纵向轮播
  - 纵向，默认显示第2屏（index 1），不显示导航点，不可拖动，滚动间隔为5秒
  - @before-change: from: 0, to: 0@after-change: from: 0, to: 0
- 每屏多内容 Goto 2
  - 复杂结构，每屏显示一组多条内容
  - @before-change: from: 0, to: 1@after-change: from: 0, to: 1
API
- Swiper Props
- Swiper Methods
  - play(autoplay)
  - stop()
  - prev()
  - next()
  - goto(index)
  - getIndex()
- Swiper Events
  - @beforeChange(from, to)
  - @afterChange(from, to)

Swiper 轮播

Scan me!

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

引入

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

代码演示

横向轮播 Goto 2PlayStop

10秒后异步加载更多项，20秒后重置为初始数量

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

Swiper 轮播 - 图2

        <template>
  <div class="md-example-child md-example-child-swiper md-example-child-swiper-0">
    <md-swiper
      @before-change="beforeChange"
      @after-change="afterChange"
      ref="swiper"
      :is-prevent="false"
      :useNative-driver="false"
    >
      <md-swiper-item :key="$index" v-for="(item, $index) in simple">
        <div
          class="banner-item"
          :style="{'background': `${item.color}`}">{{item.text}}</div>
      </md-swiper-item>
    </md-swiper>
  </div>
</template>
<script>
import {Swiper, SwiperItem} from 'mand-mobile'
import simple from 'mand-mobile/components/swiper/demo/data/simple'
export default {
  name: 'swiper-demo',
  components: {
    [Swiper.name]: Swiper,
    [SwiperItem.name]: SwiperItem,
  },
  data() {
    return {
      simple,
    }
  },
  mounted() {
    // Simulation of asynchronous
    setTimeout(() => {
      this.simple = simple.concat(simple)
    }, 10000)
    // Simulation of asynchronous
    setTimeout(() => {
      this.simple = simple
    }, 24500)
    window.triggerSwiper0 = () => {
      this.goto()
    }
    window.triggerSwiper1 = () => {
      this.play()
    }
    window.triggerSwiper2 = () => {
      this.stop()
    }
  },
  methods: {
    setValue(id, value) {
      document.querySelector(id) && (document.querySelector(id).innerHTML = value)
    },
    beforeChange(from, to) {
      this.setValue('#valueSwiper0', from)
      this.setValue('#valueSwiper1', to)
    },
    afterChange(from, to) {
      this.setValue('#valueSwiper2', from)
      this.setValue('#valueSwiper3', to)
    },
    fn(index) {
      this.setValue('#valueSwiper4', index)
    },
    goto() {
      this.$refs.swiper.goto(2)
    },
    play() {
      this.$refs.swiper.play()
    },
    stop() {
      this.$refs.swiper.stop()
    },
  },
}
</script>
<style lang="stylus">
.md-example-child-swiper-0
  height 250px
  .banner-item
    float left
    width 100%
    height 100%
    line-height 250px
    text-align center
    font-size 28px
    color #FFF
    box-align center
    align-items center
    box-pack center
    justify-content center
    text-decoration-line none
</style>

渐隐轮播 Goto 2

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

Swiper 轮播 - 图3

        <template>
  <div class="md-example-child md-example-child-swiper md-example-child-swiper-2">
    <md-swiper
      @before-change="beforeChange"
      @after-change="afterChange"
      :autoplay="5000"
      transition="fade"
      ref="swiper">
      <md-swiper-item :key="$index" v-for="(item, $index) in simple">
        <a href="javascript:void(0)"
          class="banner-item"
          :style="{'background': `${item.color}`}">{{item.text}}</a>
      </md-swiper-item>
    </md-swiper>
  </div>
</template>
<script>
import {Swiper, SwiperItem} from 'mand-mobile'
import simple from 'mand-mobile/components/swiper/demo/data/simple'
export default {
  name: 'swiper-demo',
  components: {
    [Swiper.name]: Swiper,
    [SwiperItem.name]: SwiperItem,
  },
  data() {
    return {
      simple,
    }
  },
  mounted() {
    window.triggerSwiper3 = () => {
      this.goto()
    }
  },
  methods: {
    setValue(id, value) {
      document.querySelector(id) && (document.querySelector(id).innerHTML = value)
    },
    beforeChange(from, to) {
      this.setValue('#valueSwiper10', from)
      this.setValue('#valueSwiper11', to)
    },
    afterChange(from, to) {
      this.setValue('#valueSwiper12', from)
      this.setValue('#valueSwiper13', to)
    },
    goto() {
      this.$refs.swiper.goto(2)
    },
  },
}
</script>
<style lang="stylus">
.md-example-child-swiper-2
  height 250px
  .banner-item
    float left
    width 100%
    height 100%
    line-height 250px
    text-align center
    font-size 28px
    color #FFF
    box-align center
    align-items center
    box-pack center
    justify-content center
    text-decoration-line none
</style>

纵向轮播

纵向，默认显示第2屏（index 1），不显示导航点，不可拖动，滚动间隔为5秒

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

Swiper 轮播 - 图4

        <template>
  <div class="md-example-child md-example-child-swiper md-example-child-swiper-1">
    <md-swiper
      @before-change="beforeChange"
      @after-change="afterChange"
      :default-index="1"
      :dragable="false"
      :autoplay="5000"
      transition="slideY">
      <md-swiper-item :key="$index" v-for="(item, $index) in simple">
        <a href="javascript:void(0)"
          class="banner-item"
          :style="{'background': `${item.color}`}">{{item.text}}</a>
      </md-swiper-item>
    </md-swiper>
  </div>
</template>
<script>
import {Swiper, SwiperItem} from 'mand-mobile'
import simple from 'mand-mobile/components/swiper/demo/data/simple'
export default {
  name: 'swiper-demo',
  components: {
    [Swiper.name]: Swiper,
    [SwiperItem.name]: SwiperItem,
  },
  data() {
    return {
      simple,
    }
  },
  methods: {
    setValue(id, value) {
      document.querySelector(id) && (document.querySelector(id).innerHTML = value)
    },
    beforeChange(from, to) {
      this.setValue('#valueSwiper5', from)
      this.setValue('#valueSwiper6', to)
    },
    afterChange(from, to) {
      this.setValue('#valueSwiper7', from)
      this.setValue('#valueSwiper8', to)
    },
  },
}
</script>
<style lang="stylus">
.md-example-child-swiper-1
  height 250px
  .banner-item
    float left
    width 100%
    height 100%
    line-height 250px
    text-align center
    font-size 28px
    color #FFF
    box-align center
    align-items center
    box-pack center
    justify-content center
    text-decoration-line none
</style>

每屏多内容 Goto 2

复杂结构，每屏显示一组多条内容

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

Swiper 轮播 - 图5

        <template>
  <div class="md-example-child md-example-child-swiper md-example-child-swiper-3">
    <md-swiper
      @before-change="beforeChange"
      @after-change="afterChange"
      ref="swiper">
      <md-swiper-item :key="$index" v-for="(item, $index) in mulit">
        <ul>
          <li :key="$index1" v-for="(sub, $index1) in item">
            <a href="javascript:void(0)" class="banner-item" :style="{'background': `${sub.color}`}">{{sub.text}}</a>
          </li>
        </ul>
      </md-swiper-item>
    </md-swiper>
  </div>
</template>
<script>
import {Swiper, SwiperItem} from 'mand-mobile'
import mulit from 'mand-mobile/components/swiper/demo/data/mulit-item'
export default {
  name: 'swiper-demo',
  components: {
    [Swiper.name]: Swiper,
    [SwiperItem.name]: SwiperItem,
  },
  data() {
    return {
      mulit,
    }
  },
  mounted() {
    window.triggerSwiper4 = () => {
      this.goto()
    }
  },
  methods: {
    setValue(id, value) {
      document.querySelector(id) && (document.querySelector(id).innerHTML = value)
    },
    beforeChange(from, to) {
      this.setValue('#valueSwiper15', from)
      this.setValue('#valueSwiper16', to)
    },
    afterChange(from, to) {
      this.setValue('#valueSwiper17', from)
      this.setValue('#valueSwiper18', to)
    },
    goto() {
      this.$refs.swiper.goto(2)
    },
  },
}
</script>
<style lang="stylus">
.md-example-child-swiper-3
  height 250px
  li
    list-style none
    float left
    width 33%
    height 125px
  .banner-item
    float left
    width 100%
    height 100%
    line-height 125px
    text-align center
    font-size 28px
    color #FFF
    box-align center
    align-items center
    box-pack center
    justify-content center
    text-decoration-line none
</style>

API

Swiper Props

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

Swiper Methods

play(autoplay)

打开自动切换

参数	说明	类型	默认值	可选值
autoplay	自动切换间隔时长(毫秒)	Number	`3000`	`[500, +Int.Max)`

vm.$refs.swiper.play(5000)

stop()

停止自动切换

vm.$refs.swiper.stop()

prev()

前一个item

vm.$refs.swiper.prev()

next()

后一个item

vm.$refs.swiper.next()

goto(index)

切换到某一个index

参数	说明	类型	默认值	可选值
index	面板索引值	Number	`0`	`[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	当前显示的index	Number

var index = vm.$refs.swiper.getIndex()

Swiper Events

@beforeChange(from, to)

轮播器将要切换前的事件

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

@afterChange(from, to)

轮播器切换完成时的事件

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