解决办法:在渲染数组数据前。判断是否为空

 v-if="slideList.length>1"
<template>
<div class="banner_swiper" >
<swiper v-if="slideList.length>1" :options="swiperOption" ref="mySwiper" style="height:100%;" >
<!-- slides -->
<swiper-slide v-for="(item,index) in slideList" :key="index"><img :src="item.filePath"></swiper-slide>
<!-- <swiper-slide><img src="../../assets/images/banner2.png"></swiper-slide>
<swiper-slide><img src="../../assets/images/banner3.png"></swiper-slide> -->
<!-- Optional controls -->
<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>
// require styles
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import {getHomeInfo} from '../../assets/js/api.js';
export default {
props: ["slideList"],
data() {
return {
swiperOption: {
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
autoplay: {
delay: 4000,//1秒切换一次
},
initialSlide :0,
loop : true,
pagination: {
el: '.swiper-pagination',
},
// navigation: {
// nextEl: '.swiper-button-next',
// prevEl: '.swiper-button-prev',
// }, }
};
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
components: {
swiper,
swiperSlide
},
mounted() {
// console.log(
// 'This is current swiper instance object', this.mySwiper,
// 'It will slideTo banners 3')
// this.mySwiper.slideTo(3, 1000, false)
},
methods: {
}
};
</script>
<style>
.banner_swiper{width:100%;height:auto;}
.swiper-pagination-bullet-active{background-color:#ff450e;}
</style>

vue轮播,vue-awesome-swiper动态数据渲染,loop无效,轮循无效的更多相关文章

  1. swiper轮播问题之一:轮播图内容为动态数据生成时轮播图无法自动轮播

    本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助.        首先,new Swiper的初始化最 ...

  2. vue自定义轮播图组件 swiper

    1.banner 组件 components/Banner.vue <!-- 轮播图 组件 --> <template> <div class="swiper- ...

  3. 微信小程序轮播图组件 swiper,swiper-item及轮播图片自适应

    官网地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html index.wxml文件 indicator-d ...

  4. angularjs中使用轮播图指令swiper

    我们在angualrjs移动开发中遇到轮播图的功能 安装 swiper  npm install --save swiper   或者 bower install --save swiper 引入文件 ...

  5. 兼容pc端和移动端的轮播图插件 swiper.js

    swiper.js是一款纯JavaScript打造的滑动特效插件,可以用来实现检点轮播图,tab触摸滑动切换等常用效果.下载地址:https://www.swiper.com.cn/download/ ...

  6. 轮播图 -- view, swiper

    效果图 制作步骤: 一.创建一个page 二.编写demo.wxml写界面元素 <!--miniprogram/pages/demo/demo.wxml--> <view class ...

  7. 轮播图插件swiper 的使用

    引入文件(注:目前版本号为Swiper3.x) <link rel="stylesheet" type="text/css" href="//s ...

  8. 图片轮播的JS写法,通用涉及多个轮播

    本代码是借鉴大神的代码分析理解后,自己改写的!有不足指出希望给为大神指点. 核心只有一个JS,里面包含了css样式. 展示效果图:

  9. SQL(笔试题)网站上的广告位是轮播的,每天某一广告位最多可轮播的广告数量是有限制的,比如A广告位,每天只能轮播三个广告,但销售人员在销售广告位时并不考虑此限制,要求查询出合同表中,超过广告位轮播数量的合同。

    合同表 Orders OrderID Positioncode Startdate Enddate 1 A 2006-11-01 2006-11-03 2 C 2006-11-02 2006-11-0 ...

  10. 纯js轮播图练习-2,js+css旋转木马层叠轮播

    基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...

随机推荐

  1. 16.0-uC/OS-III同步

    同步 uC/OS-III中用于同步的两种机制:信号量和事件标志组 . 1.信号量 信号量最初用于控制共享资源的访问.信号量可用于ISR与任务间.任务与任务间的同步. “ N”表示信号量可以被累计.初始 ...

  2. scrapy学习---管道

    使用管道必须实现process_item() 方法 process_item(self, item, spider) 次方法实现数据的过滤处理等操作 open_spider(self, spider) ...

  3. 【Common】NO.81.Note.1.Common.1.002-【文章摘要】

    1.0.0 Summary Tittle:[Common]NO.81.Note.1.Common.1.002-[文章摘要] Style:Common Series:Common Since:2018- ...

  4. chrome下调试安卓app 之 ionic

    打开chrome浏览器,输入chrome://inspect/#devices,将安卓手机插入电脑上,打开手机设置 打开 开发者调试usb调试 ,网页上会出现 input 点击, 就会看见consol ...

  5. 初识GitHub之GitHub issues

    事实上,GitHub最重要的一个功能之一就是Issue(问题),有了Issue,极大地提高了用户的互动性,也同时推动了代码的发展,因为一人智短,众人拾柴火焰高. 在他人的仓库中,我们发现了需要的代码, ...

  6. PHP----------php-fpm进程数的一些相关配置

    1.其中pm.max_children如何配置:pm.max_children 数量的多少根据机器内存确定,基本上一个进程需要30M的内存,假设起100个进程,那么就是3000M,3G内存. 2.pm ...

  7. 文件上传时出现 Processing of multipart/form-data request failed. Unexpected EOF read on the socket错误

    上传时一直出现这个错误,修改tomcat的server.xml文件,更改tomcat版本,也查阅了网上的很多解决办法,都不能解决问题. 后在stackoverflow的一篇文章上找到了解决方法: 加上 ...

  8. h5 的localStorage和sessionStorage存到缓存里面的值是string类型

    localStorage永久存在,不手动清除永远存在:sessionStorage 一次会话的浏览器关闭就自动清除 h5 的localStorage和sessionStorage 存到缓存里面的值都是 ...

  9. SCI_Call_Bsw_SetPwmMotorGroupB

    Sci_Bsw.c -- definition MotorGroupB_cfg.c -- called in LatchControl_Magna.c: extern uint16 Sci_DRead ...

  10. Spring错误——Spring xml注释——org.xml.sax.SAXParseException; lineNumber: 24; columnNumber: 10; cvc-complex-type.2.3: 元素 'beans' 必须不含字符 [子级], 因为该类型的内容类型为“仅元素”。

    背景:配置spring xml,注释xml中文件元素 错误: Caused by: org.xml.sax.SAXParseException; lineNumber: 24; columnNumbe ...