在ionic3中使用ion-slides是设置loop=true,autoplay='2000'时每隔2s自动轮播,这时轮播图在原有基础上前后会自动各复制一个,由于只复制的元素没没有复制绑定事件会导致点击无效.详见上篇ionic3 踩坑、ion-slides组件loop=true时有些点击事件无效;
今天这篇是loop=true,autoplay="2000"时的另一个问题,这时手滑循环正常,但是自动滑动就不行了,每次滑动到最后一项时不是正常的无隙切换到第一项,而是突然反向滑动到第一项.而且这种情况在pc chrome模拟器上还是正常的,只是在真机上才会出现,非常不好测试.不知道是项目环境导致的个例还是什么情况网上搜了一遍,好像并没有其他人遇到并解决.这里记录一下
当loop=true时已经前后复制了元素,且手动滑动正常,autoplay自动滑动我们操作不了,我去除autoplay,自己写了一个定时器,每隔3s执行一遍调用slideNext方法滑动.同时在模板里用ionSlideDidChange方法监听.每次滑动时调用getActiveIndex()方法获取当前活动下标,当滑动到最后一项在向后滑就是复制的第一个图片了.即当前下标等于你的数组长度加1,这是js获取到轮播动画的transform属性,滑动到第一项,后面依此循环;至于你的slidesbox在不同设备下的宽度可用getComputedStyle方法获得具体用法如代码所示.
slidetimer: any;
leave: boolean = false;//判断是否离开页面,离开时在钩子里置为false,定时器不停但slideNext不执行,进入时置为true,正常滑动;
ionViewDidLoad() {//只在首次进入执行一次
this.slidetimer = setInterval(() => {
if (this.leave) {
this.slides.slideNext();
}
}, 3000)
}
slideChanged() {
let w = window.getComputedStyle(document.getElementsByClassName('myslides')[0], 'width').width;//动态获取宽度;
let currentIndex = this.slides.getActiveIndex();//获取当前下标;
if (currentIndex >= (this.newsModels.length + 1)) {// eg:length=4 复制后为 3 0123 0右到左滑没有最左复制的那一项所以对应下标为 ('' 1234 5 )直接冲0-0为1-5滑到最后一个项为复制的第一个图片0时,下标为5这时js执行x轴方向translate到图片1下标为2无隙循环滑动.循环的下标为12345 2345 2345
$('.myslides .swiper-wrapper').css('transform', `translate3d(-${w}, 0px, 0px)`);
}
}
此方法即可解决首位切换时反向滑动问题,有可解决上篇ionic3 踩坑、ion-slides组件loop=true时有些点击事件无效的问题.由此可见只复制模块不复制事件的问题并不是loop=true引起的,而是加了autoplay后才出现的.