vue使用swiper动态获取数据轮播异常以及点击跳转
2019-03-23 16:14
2935 查看
swiper官网:https://www.swiper.com.cn/
loop:是否开启无缝循环轮播,
autoplay:是否自动开启轮播
speed:轮播速度
spaceBetween:轮播图片的间距
slidesPerView:显示轮播图片数量
centeredSlides: active slide位置,默认居左
其他配置如分页器,左右按钮,甚至缩略图都有 可以自行配置
死数据一般是没毛病的,如果是动态获取数据,因为swiper初始化太快,可能数据未获取完而swiper已经初始化完毕 造成轮播异常
vue使用swiper动态获取数据轮播异常
有的说要配置属性
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swipe
也有的说配置这个:
onSlideChangeEnd: function(swiper){
swiper.update();
mySwiper.startAutoplay();
mySwiper.reLoop();
},
但我这里都没效果,最后用了vue中的nextTick解决:
this.$nextTick(()=>{
this.initswiper();//自己定义的方法,里面是swiper的初始化配置
})
其实就是延迟了初始化的时间,使用定时器应该也是可行的。
vue使用swiper快速多次点击事件跳转页面
swiper点击事件 click点击事件(快速多次点击无效) double tab双击事件,tab点击事件这个自己去看吧单次还是多次都有效
快速多次点击的话使用click没有效果,要使用tab方法
on:{ tap: function(){ let i=mySwiper.realIndex;//无缝轮播因为有img是复制出来的不能直接获取到请求的数据中带的路径参数,需要获取点击的realindex值拿到点击的图片在图片数组中的索引,然后根据索引重新获取当前点击图片所带的路径 that.get(i);//去获取当前点击图片在请求到的数据中所带的跳转路径。 }, }
遇见问题,留作参考。
相关文章推荐
- 在Vue中使用了Swiper ,动态从后台获取数据的之后,swiper滑动失效
- vue 列表页跳转详情页获取id的方法以及详情页通过id获取数据
- swiper动态加载数据轮播滑动异常问题
- Vue项目使用swiper做轮播图时,异步调用数据时导致图片不能滑动的解决方法
- 对于Vue-cli的路由跳转以及使用vue.js动态修改CSS样式
- viewpager+handler获取网络数据无限自动轮播,xlistview添加头部viewpager,点击条目跳转百度
- vue使用swiper(vue-awesome-swiper)使用以及环状轮播(loop:true)不起作用的问题
- vue单页应用中,使用setInterval()定时向服务器获取数据,后来跳转页面后,发现还在不停的获取数据。
- ThinkPHP定时ajax获取后台数据,使用javascript动态修改前端页面的表格来显示数据
- 关于动态获取设置像素大小以及TypedValue.applyDimension()的使用
- 使用vue-router切换页面时,获取上一页url以及当前页面url
- 使用smartUpload组件进行文件上传以及获取文本数据
- 使用layer完成点击弹窗并且提交数据以及日期插件的使用
- 根据后台接口获取动态数据,使用JS拼接html
- 前台使用ajax动态获取数据并且显示在页面上,SSM框架二级联动
- 使用AngularJS结合Highchart图表动态获取JSON格式数据
- JS使用ajax从xml文件动态获取数据显示的方法
- 使用原生JavaScriptAjax以及jQuery的Ajax结合SpringMVC发送和获取json数据
- Echarts的使用以及动态加载数据
- vue 父组件向子组件传值,子组件动态获取数据更新