Swiper 走马灯

一、概述

定义

一组轮播海报的展示 banner 组件。

使用场景

• 当有一组并列的内容

• 内容过多时，可使用使其节省空间

• 常用于一组 banner 或卡片轮播

交互说明

• 高量显示的为当前展示的 banner 位

• 鼠标 hover 对应的走马灯出现对应变化，点击视图切换

基础样式

<template>
  <se-swiper @change="slideChange" @animation-finish="animationfinish" autoplay>
    <se-swiper-item :item-id="item" v-for="item of list" :key="item">
      slider{{item}}
    </se-swiper-item>
  </se-swiper>
</template>
<script>
  export default {
    data() {
      return {
        list: [1, 2, 3]
      }
    },
    methods: {
      slideChange(current) {
        console.log(`slideChange触发,当前index为${current}`)
      },
      animationfinish(current) {
        console.log(`animationfinish触发,当前index为${current}`)
      }
    }
  }
</script>
<style>
  .se-swiper-item {
    height: 300px;
    color: #fff;
    font-size: 14px;
    line-height: 300px;
    text-align: center;
    background-color: #99a9bf;
  }
</style>

方向

默认情况下，vertical 为 false。通过设置 vertical 为 true 来让 swiper 在垂直方向上显示。

<template>
  <se-swiper :vertical="vertical" :height="height" autoplay>
    <se-swiper-item v-for="item in 5" :key="item">
      slider{{item}}
    </se-swiper-item>
  </se-swiper>
</template>
<script>
  export default {
    data() {
      return {
        vertical: true,
        height: 300
      }
    }
  }
</script>
<style>
  .se-swiper-item {
    height: 300px;
    color: #fff;
    font-size: 14px;
    line-height: 300px;
    text-align: center;
    background-color: #99a9bf;
  }
</style>

同时显示多个 slide

<template>
  <se-swiper :displayMultipleItems="displayMultipleItems">
    <se-swiper-item v-for="item in 5" :key="item">
      slider{{item}}
    </se-swiper-item>
  </se-swiper>
</template>

<script>
  export default {
    data() {
      return {
        displayMultipleItems: 3
      }
    }
  }
</script>

<style>
  .se-swiper-item {
    height: 300px;
    color: #fff;
    font-size: 14px;
    line-height: 300px;
    text-align: center;
    background-color: #99a9bf;
  }

  .se-swiper__item:nth-child(even) {
    opacity: 0.8;
  }
</style>

初始化跳转到自定义页

<template>
  <se-swiper :current="current">
    <se-swiper-item v-for="item in 5" :key="item">
      slider{{item}}
    </se-swiper-item>
  </se-swiper>
</template>

<script>
  export default {
    data() {
      return {
        current: 3
      }
    }
  }
</script>

<style>
  .se-swiper-item {
    height: 300px;
    color: #fff;
    font-size: 14px;
    line-height: 300px;
    text-align: center;
    background-color: #99a9bf;
  }
</style>

Props

Events

Methods