只有一张图片的时候也可以滚动怎么解决？

// base/slider/index.vue

<template>
<swiper :options="swiperOption">
<slot></slot>
<div class="swiper-pagination" v-if="pagination" slot="pagination"></div>
</swiper>
</template>
<script>
// 引入第三方轮播图组件插件
import {swiper} from 'vue-awesome-swiper';

export default {
name: 'MineSlider',
components: {
swiper,
},
data() {
return {
swiperOption: {
watchOverflow: true, // 当只有一张图片时，轮播图失效
direction: this.direction,
autoplay: this.interval ? {
delay: this.interval,
disableOnInteraction: false // 当产生交互时，是否停止自动轮播 flase 表示不停止
} : false,
slidesPerView: 1, // 设置容器能够同时显示的图片数量
loop: this.loop,  // loop 为 true 时，小圆点显示并且会滚动，反之没有小圆点 不滚动
pagination: {
el: this.pagination ? '.swiper-pagination' : null
},
}
}
},
props: {
direction: {
type: String,
default: 'horizontal',
// 返回 true，表示传入的值是数组中的其中一个，验证通过
validator(value) {
return [
'horizontal', // 水平滑动
'vertical' // 垂直滑动
].indexOf(value) > -1
}
},
// 是否开启自动轮播
interval: {
type: Number,
default: 3000,
validator(value) {
return value > 0;
}
},
// 无缝滚动
loop: {
type: Boolean,
default: true,
},
// 分页器
pagination: {
type: Boolean,
default: true,
}
}
}
</script>

<style lang="scss" scoped>
.swiper-container{
width: 100%;
height: 100%;
}
</style>

// home.js

import axios from 'axios'; // 引入 axios 用于发送请求，获取数据
import {SUCC_CODE} from './config.js';

// 获取轮播图数据 --ajax
export const getHomeSlider = () => {
return axios.get('http://www.imooc.com/api/home/slider',{timeout: 10}).then(res => {
if(res.data.code === SUCC_CODE) {
return res.data.slider;
}
throw new Error('没有成功获取到数据');
}).catch(err => { // 捕获错误
if(err) {
console.log(err);
}
return [
{
linkUrl: 'https://www.imooc.com',
picUrl: require('@/assets/img/404.png')
}
]
})
}

同学你好，如果轮播数据没有加载出来，小圆点是不应该显示的：

并且swiper容器中只有这一张报错图片

可以下载源码，将自己写代码替换掉源码测试，对比一下，是不是哪里写的有问题：

如果找不到问题，建议将home.js，base/slider/index.vue，home/slide.vue文件代码粘贴上来，不要截图，便于定位问题所在。

祝学习愉快！