vue.js - 如何在 VueJS 中初始化 Swiper？

Question

首先感谢您抽出宝贵时间，因为我整个上午都在讨论这个问题。如何使用https://idangero.us/swiper vue.JS 上的模块？确实 Swiper 在页面上，但参数似乎没有计算在内。

我也尝试过 vue awesome swiper，但我更喜欢使用没有 bug 的官方版本。在导入之后，我也尝试在 const 中初始化 swiper。

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <v-touch
         @tap="navigateTo(item)"
         v-for="item in subList"
         :key="item._id"
         class="swiper-slide"
      >
        {{t(item.sentence)}}
      </v-touch>
    </div>
  </div>
</template>

<script>
  import Swiper from 'swiper'
  import 'swiper/dist/css/swiper.css'
  import 'swiper/dist/js/swiper.js'
  export default {
    name: 'category',
    data () {
      return {
        subList: [{some data}],
      }
    },
    mounted () {
      this.initSwiper()
    },
    methods: {
      initSwiper () {
        const mySwiper = new Swiper('.swiper-container', {
          slidesPerView: 3,
          slidesPerColumn: 2,
          spaceBetween: 50
        })
        mySwiper.init()
      }
    }
  }
</script>

<style scoped>
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 2px white;
  width: 200px;
  height: 200px;
}
</style>

例如，使用此代码，我需要在每个 div 之间有一个空格或只有 2 行，但我没有空格和 3 行...谢谢您的帮助。

Answer 1

您现在可以使用 Vue Awesome Swiper它有你需要的一切

您可以使用以下命令安装它

npm install swiper vue-awesome-swiper --save

免责声明:我没有从属关系，也没有贡献者，我只是在使用它。所以我推荐它