vue轮播，vue-awesome-swiper动态数据渲染，loop无效，轮循无效

短命女 2022-05-18 23:10 234阅读 0赞

> 今天用了一下vue-awesome-swiper，轮播数据是动态渲染的，遇到的坑是：配置 loop : true,  
> 无效，不能轮循，查看代码是前后根本没有多插数据，于是百度一下，支的招不少，都不能奏效，  
> 什么添加observer:true,observeParents:true,等都不能奏效，什么加载顺序，都没奏效；  
> 如有遇到同样问题的朋友，可用我的这简单的方法，v-if判断一下，实现loop;

swiper容器那v-if判断一下，是否有数据可以解决；

**下面列my code：**

//这是我vue一个组件， <template> <div> //第一个轮播 加了v-if 判断，可以实现 loop 轮循 <swiper v-if="gglist.length>1" :options="swiperOption" ref="mySwiper" class="swiper-box">  <swiper-slide v-for="m in gglist">{ { m}}</swiper-slide> <div class="swiper-pagination" slot="pagination"></div> <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button-next"></div> </swiper> 第二个轮播 没加判断 不能实现loop 可试试看 <swiper :options="swiperOption" ref="mySwiper2" class="swiper-box">  <swiper-slide v-for="m in gglist">{ { m}}</swiper-slide> <div class="swiper-pagination" slot="pagination"></div> <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button-next"></div> </swiper> </div> </template> <script> //前提你已经下载好vue-awesome-swiper,swiper.min.css 引入 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.min.css' Vue.use(VueAwesomeSwiper) export default{ components: { swiper:VueAwesomeSwiper.swiper, swiperSlide:VueAwesomeSwiper.swiperSlide }, data(){ return{ //配置 swiperOption: { loop : true, speed: 900, notNextTick: true, autoplay:true, preloadImages: false, pagination: { el: '.swiper-pagination', }, paginationClickable :true, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }, gglist:[],//存放的数据list } }, beforeCreate:function(){ }, created:function(){ }, beforeMount: function () { }, computed: { swiper() { return this.$refs.mySwiper.swiper } }, mounted:function(){ //这是我拿的代理地址的数据，你们需要换成自己的api地址 Vue.axios.get('/api/trade/***').then((response) => { console.log(response); this.gglist = response.data.zbGongGao; }) } } </script> <style lang="scss" scoped> .swiper-box{ height: 280px; width: 100%; } </style>

vue-awesome-swiper文档地址：[https://www.npmjs.com/package/vue-axios][https_www.npmjs.com_package_vue-axios]

如此轮播还有其它问题可与me讨论一二…

[https_www.npmjs.com_package_vue-axios]: https://www.npmjs.com/package/vue-axios