关于swiper 动态加载数据总是显示最后一张的解决办法
这里说明下我遇到的情况,后台返回数据后开始初始化swiper,设置的initialSlide :0,等参数都是没起作用,这主要说下我遇到的情况,和最后的解决方案。
我的情况解决办法为方法1
方法1:
具体参考原博文,请移步这里;
指定v-if为图片数量,当图片数量大于时才生成swiper,
在swiper@6.8.4这个版本无效
在加载完数据后,用transform指定第一页的内容移动一定的距离
//translate3d(-1px, 0px, 0px)':-1px代表位置可以是0 负数
setTimeout(() => {
document.getElementsByClassName('swiper-wrapper')[0].style.transform = 'translate3d(-1px, 0px, 0px)'
}, 50)
方法2:(我的情况不是这种情况,童鞋可自己都试试)
initSwiper(){
var mySwiper = new Swiper('#swiper-container', {
initialSlide :0,
autoplay: 5000,//可选选项,自动滑动
slidesPerView: 7,
observer:true,
observeParents:true,
});
swiper.updateSlides();
swiper.slideTo(1, 0, false);
},
写在最后,其他的还有通过v-if判断等一些方法,也是不是我的问题的解决办法