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