react-id-swiper自定义进度条轮播图的使用与踩坑全记录

)}

const params = {

initialSlide: showGradeIndex, // 初始化时slide的索引

centeredSlides: true, // 设定为true时，active slide会居中，而不是默认状态下的居左。

slidesPerView: ‘auto’, // 设置slider容器能够同时显示的slides数量(carousel模式)

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

observeParents: true, //修改swiper的父元素时，自动初始化swiper

renderPrevButton: () => null,

renderNextButton: () => null,

on: {

// 监听 Swiper 的事件，其他 Event 可以参考文档 http://idangero.us/swiper/api/#events

slideChange: () => {

// 延迟使当前动画播放完毕再去滑动，避免页面崩溃

setTimeout(() => {

this.handleSlideChange();

}, 100);

}

}

};

// 将swiper和this做绑定

getSwiper = (node) => {

// 直接将swiper赋值给this，而不是this.state,因为swiper一直在变化，不用去使用state对比，而且使用state会一直触发setState造成页面的render

if (!this.swiper) {

this.swiper = node.swiper;

console.log(888888888, this.swiper);

}

};

// swiper滑动事件

handleSlideChange = () => {

let { tabDetailInfo } = this.props;

let gradeList = tabDetailInfo.gradeList;