Vue.js 如何使vue awesome swiper正常循环并显示分页？

最近，我在我的项目中使用了。以下是我在HomeSwiper.vue文件中的代码：

//HTML

//JS
从“vue awesome swiper”导入{swiper，swiperSlide}
要求（“swiper/dist/css/swiper.css”）；
导出默认值{
名称：'HomeSwiper'，
道具：{
横幅：{
类型：数组，
默认值（）{
返回[]
}  
}
},
组成部分：{
游泳运动员，
swiperSlide
},
数据（）{
常数=这个
返回{
指数：1，
开关选项：{
诺尼克：是的，
循环：对，
初始幻灯片：0，
自动播放：{
延误：1500，
stopOnLastSlide:false，
disableOnInteraction：true
},
速度:800,，
方向：“水平”，
格雷博：是的，
关于：{
slideChangeTransitionStart:函数（）{
.imgIndex=this.realIndex-1；
},
},
分页：{
el:“.swiper分页”，
可点击：正确，
类型：“子弹”
}
}
}
},   
计算：{
swiper（）{
返回此项。$refs.mySwiper.swiper；
}  
}
}  

代码片段看起来正常。但我遇到了两个奇怪的问题：

我发现图像不能正常循环，即使我在脚本中将循环设置为true，当到达最后一个图像时，图像总是停止循环

无法显示分页

---

所以我去github问题寻求帮助。没有人遇到同样的问题，通过在swiper元素中使用

v-if=“banners.length！=0”

来解决这些问题。但我很困惑为什么这两个问题与banners的长度有关？有人能解释一下吗？

从您的角度看，您似乎缺少了

标记

整个视图应使用

包装，以确保大小适当。您可以在此处查看文档：

模板：

<template>
    <v-content>
        <Swiper :options="swiperOption">
            <Swiper-Slide v-for="(item,index) in srcs" :key="index">
                <img class="slideImage" :src="require(`@/static/vuetifypro-pages/${ item }`)" :key="index" alt="">
            </Swiper-Slide>
            <div class="swiper-pagination swiper-pagination-white" slot="pagination"></div>
        </Swiper>
    </v-content>
</template>

<script>
    import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
    export default {
        name:'HomeSwiper',
        components:{
            Swiper,
            SwiperSlide
        },
        data() {
            return {
                srcs: {
                    1: 'Homepage_blur.jpg',
                    2: 'Login_bg.jpg',
                    3: 'home_huddle.jpg',
                },
                swiperOption: {
                    notNextTick: true,
                    loop: true,
                    initialSlide: 0,
                    autoplay: {
                        delay: 1500,
                        disableOnInteraction: true
                    },
                    speed: 800,
                    grabCursor: true,
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true,
                        type: "bullets"
                    }
                }
            }
        },
    }
</script>

脚本：

<template>
    <v-content>
        <Swiper :options="swiperOption">
            <Swiper-Slide v-for="(item,index) in srcs" :key="index">
                <img class="slideImage" :src="require(`@/static/vuetifypro-pages/${ item }`)" :key="index" alt="">
            </Swiper-Slide>
            <div class="swiper-pagination swiper-pagination-white" slot="pagination"></div>
        </Swiper>
    </v-content>
</template>

<script>
    import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
    export default {
        name:'HomeSwiper',
        components:{
            Swiper,
            SwiperSlide
        },
        data() {
            return {
                srcs: {
                    1: 'Homepage_blur.jpg',
                    2: 'Login_bg.jpg',
                    3: 'home_huddle.jpg',
                },
                swiperOption: {
                    notNextTick: true,
                    loop: true,
                    initialSlide: 0,
                    autoplay: {
                        delay: 1500,
                        disableOnInteraction: true
                    },
                    speed: 800,
                    grabCursor: true,
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true,
                        type: "bullets"
                    }
                }
            }
        },
    }
</script>

从“vue awesome Swiper”导入{Swiper，SwiperSlide}；
导出默认值{
名称：'HomeSwiper'，
组成部分：{
游泳运动员，
SwiperSlide
},
数据（）{
返回{
SRC：{
1:“主页_blur.jpg”，
2:'Login_bg.jpg'，
3:“home_huddle.jpg”，
},
开关选项：{
诺尼克：是的，
循环：对，
初始幻灯片：0，
自动播放：{
延误：1500，
disableOnInteraction：true
},
速度:800,，
格雷博：是的，
分页：{
el:“.swiper分页”，
可点击：正确，
类型：“子弹”
}
}
}
},
}

您的视图中似乎缺少了

标记

整个视图应使用

包装，以确保大小适当。您可以在此处查看文档：

模板：

<template>
    <v-content>
        <Swiper :options="swiperOption">
            <Swiper-Slide v-for="(item,index) in srcs" :key="index">
                <img class="slideImage" :src="require(`@/static/vuetifypro-pages/${ item }`)" :key="index" alt="">
            </Swiper-Slide>
            <div class="swiper-pagination swiper-pagination-white" slot="pagination"></div>
        </Swiper>
    </v-content>
</template>

<script>
    import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
    export default {
        name:'HomeSwiper',
        components:{
            Swiper,
            SwiperSlide
        },
        data() {
            return {
                srcs: {
                    1: 'Homepage_blur.jpg',
                    2: 'Login_bg.jpg',
                    3: 'home_huddle.jpg',
                },
                swiperOption: {
                    notNextTick: true,
                    loop: true,
                    initialSlide: 0,
                    autoplay: {
                        delay: 1500,
                        disableOnInteraction: true
                    },
                    speed: 800,
                    grabCursor: true,
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true,
                        type: "bullets"
                    }
                }
            }
        },
    }
</script>

脚本：

<template>
    <v-content>
        <Swiper :options="swiperOption">
            <Swiper-Slide v-for="(item,index) in srcs" :key="index">
                <img class="slideImage" :src="require(`@/static/vuetifypro-pages/${ item }`)" :key="index" alt="">
            </Swiper-Slide>
            <div class="swiper-pagination swiper-pagination-white" slot="pagination"></div>
        </Swiper>
    </v-content>
</template>

<script>
    import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
    export default {
        name:'HomeSwiper',
        components:{
            Swiper,
            SwiperSlide
        },
        data() {
            return {
                srcs: {
                    1: 'Homepage_blur.jpg',
                    2: 'Login_bg.jpg',
                    3: 'home_huddle.jpg',
                },
                swiperOption: {
                    notNextTick: true,
                    loop: true,
                    initialSlide: 0,
                    autoplay: {
                        delay: 1500,
                        disableOnInteraction: true
                    },
                    speed: 800,
                    grabCursor: true,
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true,
                        type: "bullets"
                    }
                }
            }
        },
    }
</script>

从“vue awesome Swiper”导入{Swiper，SwiperSlide}；
导出默认值{
名称：'HomeSwiper'，
组成部分：{
游泳运动员，
SwiperSlide
},
数据（）{
返回{
SRC：{
1:“主页_blur.jpg”，
2:'Login_bg.jpg'，
3:“home_huddle.jpg”，
},
开关选项：{
诺尼克：是的，
循环：对，
初始幻灯片：0，
自动播放：{
延误：1500，
disableOnInteraction：true
},
速度:800,，
格雷博：是的，
分页：{
el:“.swiper分页”，
可点击：正确，
类型：“子弹”
}
}
}
},
}

这与Vuetify无关。它只是vueI用codesandbox重新创建了滑块，并且100%有效。看看这里：我建议用这个例子仔细检查你的vue Aweasome swiper dependencie。我试图使用你的CSS导入，但沙盒对此不满意，因此进行了更改。也许这就是导致分页消失的原因。希望这有帮助。这与Vuetify无关。只是vueI用codesandbox重新创建了你的滑块，它100%工作。看看这里：我建议用这个例子仔细检查你的vue Aweasome swiper dependencie。我试图使用你的CSS导入，但沙盒对此不满意，因此进行了更改。也许这就是导致分页消失的原因。希望这有帮助。