如何在 Vue Js 中使用 swiper 断点答案

【问题标题】：How to use swiper breakpoints in Vue Js如何在 Vue Js 中使用 swiper 断点
【发布时间】：2021-06-15 17:43:16
【问题描述】：

早上好，我正在使用 VueJS 作为前端创建一个网站，我已经通过 npm 安装了 SwiperJS 以便 Vue 制作滑块。它工作正常，但我无法使功能断点具有响应数量的幻灯片。我使用此代码制作了一个响应式帖子部分，其中所有 4 个帖子都显示在 PC 视图中，而在移动视图中一次只显示一个（您也可以滚动到移动视图上的帖子）

这是我的代码：

slider.vue

<template>
  <swiper
    :slides-per-view="4"
    :space-between="20"

    >
    <swiper-slide v-for="posts in APIData" :key="posts.slug">
      <img class="card-img-top" v-bind:src=posts.image alt="Card image cap">
      <hgroup class="text">
        <router-link to="/single"> <h3>{{posts.title}}</h3> </router-link>
        <p>{{posts.desc.substring(0,80)+".." }}</p>
     </hgroup>
    </swiper-slide>
  </swiper>
</template>

<script>
  // Import Swiper Vue.js components
  import SwiperCore, { Navigation, Pagination, Autoplay } from 'swiper';
  import { Swiper, SwiperSlide,  } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/swiper.scss';
  import 'swiper/components/pagination/pagination.scss';
  import 'swiper/components/navigation/navigation.scss';
  import { getAPI } from '../../api'
  // Swiper Plugins
  SwiperCore.use([Navigation, Pagination, Autoplay]);

  export default {
    data () {
      return { // Retourn the API Dates
        APIData: [],
        swiperOptions: {
          breakpoints: {       
      320: {       
         slidesPerView: 1,
         spaceBetween: 10     
      },          
      770: {       
         slidesPerView: 2,       
         spaceBetween: 50     
      },   
  
      771: {       
         slidesPerView: 4,       
         spaceBetween: 30     
      } 
   }   
        }
      }
    },

    components: {
      Swiper,
      SwiperSlide,
    },
    
    methods: {
      onSwiper(swiper) {
        console.log(swiper);
      },
      onSlideChange() {
        console.log('slide change');
      },
    },
  // Connect to API
   created () {
      getAPI.get('blog/api/list/last',)
        .then(response => {
          console.log('Post API has recieved data')
          this.APIData = response.data
        })
        .catch(err => {
          console.log(err)
        })
    },
  };
</script>

<style lang="sass" scoped>

.swiper-container
    background: linear-gradient(to top left, #BF092D, #8D0923)
    height: 80vh
    padding: 3rem
    .read-more
        padding: 20px
        color: #fff
        float: right
    .swiper-wrapper
        .swiper-slide
            background-color: #fff
            border-radius: 5px
            .text
                padding: 1rem
                h3
                    background: linear-gradient(to top left, #BF092D, #8D0923)
                    -webkit-background-clip: text
                    -webkit-text-fill-color: transparent
            img
                margin: auto
                display: block
                width: 100%
                height: 45% 
                border-radius: 5px 5px 0px 0px
</style>

【问题讨论】：

标签： javascript vue.js swiper swiper.js vue3-carousel

【解决方案1】：

您需要像这样将选项对象传递给 Swiper：

<swiper
    :breakpoints="swiperOptions.breakpoints"
>

也适用于其他属性：https://swiperjs.com/vue。 Vue 组件一次获取一个属性。这也可以使用 devtools 进行检查：

【讨论】：