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

想要实现的效果：

切换tab动态为轮播图加载数据，运动中的轮播图（中间图片）最大，当前进度圆环最大，滑动滚动条查看不同级别对应数据

分析

所有轮播图数据为后端返回数组，所以整个进度条需要我们前端自己拼，所以每一个进度条组成为"左段线+圆环+右段线",然后再进行与当前轮播图activeIndex做比较加入相应样式即可

 	<Swiper{/*  swiper初始化参数传递 */}{...params}{/* 为获取swiper的activeIndex */}ref={(node) => {if (node) {this.getSwiper(node);}}}>{progressList.length > 0 &&progressList.map((item, index) => ({/* 加slideBanner这一层是为了成功给每一个滑动模块加宽度等样式 */}<div className={styles.slideBanner}><div className={index < 9 ? `${styles.slideWrapper}` : `${styles.slideMargin}`}>{/* 显示图片 */}<div className={styles.slideItem}>{this.initImg(item, index)}</div>{/* 灰色进度条,包括横线和圆环 ，这里略过 */}<div></div>{/* 黄色进度条,包括横线和圆环 ，使用position进行重叠定位，这里略过 */}<div></div></div></div>)}</Swiper>const params = {initialSlide: showGradeIndex, // 初始化时slide的索引centeredSlides: true, // 设定为true时，active slide会居中，而不是默认状态下的居左。slidesPerView: 'auto', // 设置slider容器能够同时显示的slides数量(carousel模式)observer: true, //修改swiper自己或子元素时，自动初始化swiperobserveParents: true, //修改swiper的父元素时，自动初始化swiperrenderPrevButton: () => null,renderNextButton: () => null,on: {// 监听 Swiper 的事件，其他 Event 可以参考文档 http://idangero.us/swiper/api/#eventsslideChange: () => {// 延迟使当前动画播放完毕再去滑动，避免页面崩溃setTimeout(() => {this.handleSlideChange();}, 100);}}};    // 将swiper和this做绑定getSwiper = (node) => {// 直接将swiper赋值给this，而不是this.state,因为swiper一直在变化，不用去使用state对比，而且使用state会一直触发setState造成页面的renderif (!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;// 记录当前活动idthis.setState({currentIndex: index});};initImg(item, index) {let finalIcon = ... // 此处省略对显示图片的处理。。。return（<imgsrc={finalIcon}alt=""className={currentIndex === index ? `${styles.activeImg}` : `${styles.slideImg}`}/>）}  // swiper样式覆盖，为当前活动（中间）swiper设置样式.swiper-slide-active .slideWrapper .slideItem .slideImg {width: 114px;height: 111px;}                                

需要注意的问题：

1.react-id-swiper装最新包报错

这玩意真的太坑了我只能说，能不用就要用了吧，我是看之前的同事用的这个他把api发给我以后我也没有做过多的调研就用了，但是真的太坑了，2020年6月就已经停止更新了，一开始装最新的包会一直报错，所以可以尝试使用1.6.9版本

2.引入css报错

这也是我一开始遇到的问题，无论是使用
import ‘swiper/swiper.min.css’ 或者是
import ‘react-id-swiper/src/styles/css/swiper.css’;
等方式都报模块找不到，这里提供一个方式是把swiper.min.css文件down下来放到自己文件夹中引入

3.绑定滑动或者点击change事件

这个官网也没有写，真的很垃圾，我尝试用了腾讯ui工程师的方式react-id-swiper 的使用将getSwiper事件直接写在params中不生效

所以我反向使用给swiper赋值ref，通过传递node参数赋值给this或者this.state

4.swiper样式覆盖

这里只分析我的页面层级

样式不生效的话，可以使用css多层级加id提高权重或者加 !important

4.轮播图动态数据卡顿不更新、频繁刷新导致页面崩溃问题（数据溢出问题）

滑动轮播图下边展示相应等级数据，一开始是获取当前index然后去列表中取当前对应的数据进行展示，但有卡顿问题和崩溃问题产生

1.滑动轮播图查看详情卡顿，选择在页面加载的时候全部渲染，滑动显示不同的模块

list && list.length > 0 && list.map((item, index) => {return (currentIndex === index && ({/* 当前等级详情 */}<div></div>))
})

2.轮播图动态加载数据轮播图不更新问题，加了以下两个属性也没有生效

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

第一次找到的解决办法是，当tablist有数据后，也循环轮播图，切换tab就会重新加载轮播图

tabList.map((item, index) => {return (tabIndex === index && (<ProgressSwipertabDetailInfo={tabDetailInfo}/>));
})

但这种方法会造成多次循环渲染同，所以还是改用从tabList中取出当前对应数据，为防止异步造成的切换tab时轮播图数据未成功返回，我们在这里加一下featcing作为判断

{JSON.stringify(tabDetailInfo) !== '{}'? tabList &&tabList[tabIndex] &&!isFetching && (<ProgressSwiper tabDetailInfo={tabDetailInfo} startRightsList={startRightsList} />): null}

3.滑动轮播图后频繁切换tab及滑动轮播图会导致页面崩溃

1.查看页面发现当前tab动画没有播放完毕就去请求数据，频繁切换严重影响性能，这里使用了antd的tablist组件，点击切换会有动画产生，把动画关闭后卡顿有所缓解

2.给轮播图滑动事件加延迟，播放完动画后再去触发滑动事件，轮播图卡顿及页面崩溃得到解决

on: {// 监听 Swiper 的事件，其他 Event 可以参考文档 http://idangero.us/swiper/api/#eventsslideChange: () => {// 延迟使当前动画播放完毕再去滑动，避免页面崩溃setTimeout(() => {this.handleSlideChange();}, 100);}}

5.轮播图赋初始值问题(onslideChange事件初始加载导致数据 发生变化）

切换tab后发现轮播图数据有更新，但当前活动id等没发生变化，默认一直是第一个，要切换tab后才能正常，通过打印数据发现传值与接值都是没问题的，但后期activeIndex都会变成0，注释掉代码发现原来错误是出现在了slideChange事件里！因为在这个事件我把activeIndex的初始值都设置为了0

改变赋值父组件传过来的当前级别index就可以了

但是我不明白的是为啥一个change事件在页面加载的时候就触发！我是真的无语，这玩意太辣鸡了！辣鸡辣鸡辣鸡辣鸡！！！！！

好了，关于这个react-id-swiper的使用和踩坑记录就到这里了，我还是建议大家别用了，去用正规的swiper吧，这玩意儿文档写的也不清楚（好多swiper的事件还不能用），资料还特别少，让我加了好几天班！再说一次：

react-id-swiper是个辣鸡！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！