Swiper 在vue中的使用,loop=true获取真实index,数据更新刷新初始化swiper

1.安装

npm install swiper --save-dev

2.在组件中引用

import Swiper from "swiper"
import 'swiper/dist/css/swiper.css';

3.初始化swiper

new Swiper('.swiper-container', { pagination: '.swiper-pagination',effect: 'coverflow',grabCursor: true,centeredSlides: true,slidesPerView: 'auto',loop:true,initialSlide : _this.activeIndex, observer:true,//修改swiper自己或子元素时，自动初始化swiperobserveParents:true,//修改swiper的父元素时，自动初始化swipercoverflow: {rotate: 50,stretch: 0,depth: 100,modifier: 1,slideShadows : true},on: {slideChangeTransitionEnd: function(){console.log(this.realIndex)_this.activeIndex = this.realIndex;},}});

（1）loop=true 时，轮询播放，activeIndex获取不到真实的索引，应该使用realIndex获取。

（2）当数据更新时，更新swiper需要一些设置即可

initialSlide : 0,
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper

（3）因为数据是动态获取的，在数据请求之后再初始化swiper，这需要使用setTimeout做一下延迟

setTimeout(() => {new Swiper('.swiper-container', { pagination: '.swiper-pagination',effect: 'coverflow',grabCursor: true,centeredSlides: true,slidesPerView: 'auto',loop:true,initialSlide : _this.activeIndex, observer:true,//修改swiper自己或子元素时，自动初始化swiperobserveParents:true,//修改swiper的父元素时，自动初始化swipercoverflow: {rotate: 50,stretch: 0,depth: 100,modifier: 1,slideShadows : true},on: {slideChangeTransitionEnd: function(){console.log(this.realIndex)_this.activeIndex = this.realIndex;},}});
},200)

官网地址：https://www.swiper.com.cn/

Swiper 在vue中的使用,loop=true获取真实index,数据更新刷新初始化swiper相关推荐

利用swiper在vue中做轮播图，并改变轮播图的原有箭头、图片等内容
目标:利用swiper在vue中做轮播图,并改变轮播图的原有箭头.图片等内容. 实现效果:1.点击左右箭头可切换图片. 2.点击后图片出现最左侧样式效果,只有被点击的图片有此效果,不被点击恢复默认效果 ...
vue中v-for为何要加key？index为何不推荐作为key
在使用vue组件的时候,我们经常会遇到v-for必须要加key值来举个例子进行说明吧! 不存在key的情况 <!--* @Author: angula* @Date: 2020-08-07 0 ...
Vue中ref的用法：获取DOM 父获取子数据父使用子方法子调用父方法
获取本页面dom元素 <template><div id="app"><div ref="testDom">11111< ...
vue中通过ref属性来获取dom的引用
ref属性可以用来获取dom的引用,它的值可以随便定义, 但是注意这个名字不要和页面中其他的ref属性名相同,获取定义的ref可以通过this.$refs.ref的名字 <div id=&quo ...
【实战】Vue 中 Props 值因异步获取导致的报错问题解析
问题简述父子组件通过 props 传值,当所传值需要异步请求获取时,子组件在挂载完成阶段(mounted),拿不到props值具体实例描述父组件: <template><div ...
vue中基于高德地图，获取省级地图（以安徽为例）
效果图展示 <template><div><div id="mapId" class="rescure-map"></ ...
vue中js转换火星坐标以及真实坐标
var gps = { pi: 3.1415926535897932384626, x_pi: 3.14159265358979324 * 3000.0 / 180.0, a: 6378245.0, ...
VUE 中使用 iview Form组件 enter键防止页面刷新
<Form :label-width="100" inline label-position='left' @keydown.native.enter.prevent =&q ...
天地图在vue中的应用删除指定的标注
天地图在vue中的应用删除指定的标注天地图引入与初始化点这里查看详情一.添加标注添加不同的标注我是用了两个方法实现的,在添加标注的是时候给这个点起一个名,作为删除的标记 point(e) {v ...

Swiper 在vue中的使用,loop=true获取真实index,数据更新刷新初始化swiper

Swiper 在vue中的使用,loop=true获取真实index,数据更新刷新初始化swiper相关推荐

最新文章

热门文章