Vue与Swiper的强强联合：拥抱更流畅的滑动体验

2023-10-12 20:51:38

使用Swiper升级你的Vue应用程序

Swiper是一个功能强大的滑动插件，它可以轻松创建出流畅的轮播图、手势操作、平滑滚动等效果。在Vue中使用Swiper，可以为你的应用程序带来更出色的用户体验。

在Vue2中使用Swiper

安装Swiper：

npm install swiper --save

在main.js文件中引入Swiper：

import Vue from 'vue'
import Swiper from 'swiper'

Vue.use(Swiper)

在组件中使用Swiper：

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    const swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      }
    })
  }
}
</script>

在Vue3中使用Swiper

安装Swiper：

npm install swiper --save

在main.js文件中引入Swiper：

import { createApp } from 'vue'
import Swiper from 'swiper'

const app = createApp({})
app.use(Swiper)
app.mount('#app')

在组件中使用Swiper：

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    const swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      }
    })
  }
}
</script>