vue轮播,vue-awesome-swiper动态数据渲染,loop无效,轮循无效
解决办法:在渲染数组数据前。判断是否为空
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无效,轮循无效的更多相关文章
- swiper轮播问题之一:轮播图内容为动态数据生成时轮播图无法自动轮播
本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助. 首先,new Swiper的初始化最 ...
- vue自定义轮播图组件 swiper
1.banner 组件 components/Banner.vue <!-- 轮播图 组件 --> <template> <div class="swiper- ...
- 微信小程序轮播图组件 swiper,swiper-item及轮播图片自适应
官网地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html index.wxml文件 indicator-d ...
- angularjs中使用轮播图指令swiper
我们在angualrjs移动开发中遇到轮播图的功能 安装 swiper npm install --save swiper 或者 bower install --save swiper 引入文件 ...
- 兼容pc端和移动端的轮播图插件 swiper.js
swiper.js是一款纯JavaScript打造的滑动特效插件,可以用来实现检点轮播图,tab触摸滑动切换等常用效果.下载地址:https://www.swiper.com.cn/download/ ...
- 轮播图 -- view, swiper
效果图 制作步骤: 一.创建一个page 二.编写demo.wxml写界面元素 <!--miniprogram/pages/demo/demo.wxml--> <view class ...
- 轮播图插件swiper 的使用
引入文件(注:目前版本号为Swiper3.x) <link rel="stylesheet" type="text/css" href="//s ...
- 图片轮播的JS写法,通用涉及多个轮播
本代码是借鉴大神的代码分析理解后,自己改写的!有不足指出希望给为大神指点. 核心只有一个JS,里面包含了css样式. 展示效果图:
- SQL(笔试题)网站上的广告位是轮播的,每天某一广告位最多可轮播的广告数量是有限制的,比如A广告位,每天只能轮播三个广告,但销售人员在销售广告位时并不考虑此限制,要求查询出合同表中,超过广告位轮播数量的合同。
合同表 Orders OrderID Positioncode Startdate Enddate 1 A 2006-11-01 2006-11-03 2 C 2006-11-02 2006-11-0 ...
- 纯js轮播图练习-2,js+css旋转木马层叠轮播
基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...
随机推荐
- bugfree3.0.1-修改“优先级”为中文引起的PHP Error
博主在搭建好bugfree后,修改了系统中“优先级”字段,将原先系统定义的优先级“1.2.3.4”修改为符合博主自己项目要求的优先级“高.中.低”.修改成功后,系统确实将原先提交的BUG优先级从“1. ...
- 安装Linux系统,学习Linux操作基础
20189230杨静怡 2018-2019-2 <移动平台开发实践>第1周学习总结 安装Linux系统内容总结 一.学习"基于VirtualBox虚拟机安装Ubuntu图文教程& ...
- Godot必须明确掌握的概念与知识
本文对godot必须掌握的概念进行罗列,以便于浏览学习: (随时补充) 1.场景 2.节点 X:场景与节点 3.脚本(建议直接学习GDscript,当然掌握C#也可以) 4.类
- 国内老版本ubuntu更新源地址以及sources.list的配置方法
在终端输入并运行 sudo apt-get install vimsudo cp /etc/apt/sources.list /etc/apt/sources.list.backup (备份当前的源列 ...
- Linux基础命令---lpstat查看打印任务
lpstat lpstat指令用来显示当前任务.打印机的状态.如果没有参数,那么就显示打印队列. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora.openSUSE. ...
- nodejs笔记之文件操作
文件操作包含: 读取文件 写入文件 删除文件 创建目录 删除目录 读取文件: // 异步操作 var fs = require("fs"); fs.readFile(". ...
- /* * 有五个学生,每个学生有3门课的成绩,从键盘输入以上数据 *(包括学生号,姓名,三门课成绩),计算出平均成绩, *将原有的数据和计算出的平均分数存放在磁盘文件"stud"中。 */
1.Student类:类中有五个变量,分别是学号,姓名,三门成绩 package test3; public class Student { private int num; private Stri ...
- PHP与JavaScript下的Cookie操作
下面的例子列出几种情形交互场景,列出JS和php交互的方法.总结下,以免日后再为cookie问题困扰. setcookie.php getcookie.php 总结: php用自身函数读取php 的c ...
- [c/c++] programming之路(24)、字符串(五)——字符串插入,字符串转整数,删除字符,密码验证,注意事项
1.将字符串插入到某位置(原字符串“hello yincheng hello cpp hello linux”,查找cpp,找到后在cpp的后面插入字符串“hello c”) 需要用到strstr字符 ...
- opencv学习之路(21)、模板匹配及应用
一.模板匹配概念 二.单模板匹配 #include "opencv2/opencv.hpp" #include <iostream> using namespace s ...