vue使用swiper插件实现垂直轮播图

下面是“vue使用swiper插件实现垂直轮播图”的攻略：

一、前提条件

在开始使用Swiper插件制作垂直轮播图之前，我们需要先确定以下条件：

1. 在vue项目中安装Swiper插件，可以通过npm命令行进行安装：npm install swiper --save；

2. 在需要使用轮播图的vue组件中引入Swiper插件：import Swiper from 'swiper'。

二、Swiper插件实现垂直轮播图

在已经满足了前置条件后，我们可以按照以下步骤实现垂直轮播图：

1. 准备一个外层容器，设置它的高度和宽度，并用CSS样式规定其中元素的布局方式和排列方式；

2. 在HTML中使用v-for指令循环渲染需要轮播的数据，并用swiper-slide标签对其进行包裹：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" v-for="item in items" :key="item.id">{{item.content}}</div>
  </div>
</div>

1. 在JS代码中通过swiper实例来初始化垂直轮播图的效果：

import Swiper from 'swiper'
export default {
  mounted () {
    new Swiper('.swiper-container', {
      // 开启垂直滚动
      direction: 'vertical',
      // 自动播放
      autoplay: true,
      // 间隔时间
      autoplayTimeout: 2000,
      // 滑动时不再自动播放
      autoplayDisableOnInteraction: false,
      // 其他配置项
      ...
    })
  }
}

三、示例说明

这里提供两个示例说明：

示例一：在vue中使用Swiper实现垂直轮播图，外层容器高度为100vh，宽度为100%。数据源来自本地json文件。

1. 安装swiper插件：npm install swiper --save

2. 引入swiper插件：import Swiper from 'swiper'

3. 在HTML中设置需轮播数据的外层容器和Swiper轮播图组件：

<template>
  <div class="app">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in items" :key="item.id">{{item.content}}</div>
      </div>
    </div>
  </div>
</template>

1. 在JS中导入数据源，在mounted钩子函数中进行Swiper实例初始化：

<script>
import Swiper from 'swiper'
import assets from '@/assets/data/items.json'

export default {
  name: 'App',
  data: function () {
    return {
      items: assets.items
    }
  },
  mounted () {
    new Swiper('.swiper-container', {
      direction: 'vertical',
      autoplay: true,
      autoplayTimeout: 2000,
      autoplayDisableOnInteraction: false,
      ...
      })
  }
}
</script>

示例二：在vue-cli3.x中使用Swiper实现垂直轮播图，样式使用scss文件书写。

1. 安装swiper插件：npm install swiper --save

2. 引入swiper插件：import Swiper from 'swiper'

3. 在HTML中设置需轮播数据的外层容器和Swiper轮播图组件：

<template>
  <div class="app">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in items" :key="item.id">{{item.content}}</div>
      </div>
    </div>
  </div>
</template>

1. 在使用vue add style-resources-loader命令安装scss文件加载插件后，定义scss文件：

// 在src/assets/scss/_vars.scss文件中定义全局变量

$swiper-container-height: 100vh;

// 在src/assets/scss/_swiper.scss文件中书写样式

@import '@/assets/scss/vars';

.swiper-container {
  width: 100%;
  height: $swiper-container-height;
  .swiper-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .swiper-slide {
      text-align: center;
      font-size: 32px;
      font-weight: 500;
      color: #333333;
      margin: 20px 0;
      line-height: 50px;
    }
  }
}

1. 在JS中导入数据源，在mounted钩子函数中进行Swiper实例初始化：

<script>
import Swiper from 'swiper'
import assets from '@/assets/data/items.json'

export default {
  name: 'App',
  data: function () {
    return {
      items: assets.items
    }
  },
  mounted () {
    new Swiper('.swiper-container', {
      direction: 'vertical',
      autoplay: true,
      autoplayTimeout: 2000,
      autoplayDisableOnInteraction: false,
      ...
      })
  }
}
</script>