录屏视频地址:https://www.yuque.com/u1326924/frols7/cma0u3
通过current和circular来控制展示的swiper ,一次只展示三个滑块,数据总题数是3n+1时,滑到最后一题,人为的修改了current=2,需要的效果:会跳到第三个滑块,实际展示的却是第一个滑块,这个修改current没有起到效果。
代码片段:
currentChange(e) {
if(e.mp.detail.source === "touch") {
let i = e.mp.detail.current;
let qsIndex = this.swiperList[i].index;
this.curIndex = qsIndex;
this.setSwipers(i);
}
},
// i 0/1/2 swiper 位置; swiperQuestions:所有数据; curIndex: 总数列表;
setSwipers(i = 0) {
let qsIndex = this.curIndex;
let nextQs = this.swiperQuestions[qsIndex + 1];
let preQs = this.swiperQuestions[qsIndex - 1];
if(qsIndex>0 && qsIndex= 0) {
this.swiperList.unshift(this.swiperQuestions[qsIndex - 2]);
this.cur = 2;
} else {
this.cur = 1;
};
}
this.$forceUpdate();
// 当前为第一个或最后一个时 禁止衔接滑动
wx.nextTick(() => {
this.circular = false;
console.log('禁止循环滑动');
});
console.log('^^^^^^^^^^^^^^^^^^^^^^^');
for (let j = 0; j < this.swiperList.length; j++) {
console.log(this.swiperList[j].noText + (j===this.cur?' 当前':''));
}
console.log('----------------------');
}
}