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

if (!this.swiper) {

this.swiper = node.swiper;

console.log(888888888, this.swiper);

}

};

// swiper滑动事件

handleSlideChange = () => {

let { tabDetailInfo } = this.props;

let gradeList = tabDetailInfo.gradeList;

let index = this.swiper ? this.swiper.activeIndex : tabDetailInfo.showGradeIndex;

// 记录当前活动id

this.setState({

currentIndex: index

});

};

initImg(item, index) {

let finalIcon = … // 此处省略对显示图片的处理。。。

return（

<img

src={finalIcon}

alt=“”

className={currentIndex === index ? ${styles.activeImg} : ${styles.slideImg}}

/>

）

}

// swiper样式覆盖，为当前活动（中间）swiper设置样式

.swiper-slide-active .slideWrapper .slideItem .slideImg {

width: 114px;

height: 111px;

}

需要注意的问题：

=================================================================