场景:
使用了react-id-swiper在h5页面中,在app中开放入口后进行多次频繁滑动会导致页面崩溃
分析:
1.需求是每个tab下都有相应的swiper数据 ,所以每次切换tab都要向后端请求数据,swiper滑动过于频繁,动画还没播放完就已经去请求接口了,这样会导致内存溢出
2.给swiper赋值动态数据时,为获取当前运动的swiper的index值,把swiper赋值给了this.state,这样就会导致在切换的时候一直触发this.setState,然后不停render影响性能
解决办法:
1.在切换swiper动画方法里加一个延迟,使当前动画播放完毕后再去切换slider
2.把swiper实例绑定在this上而不是this.state上,不再频繁触发render
{/* 进度条轮播图 */}
getSwiper = (node) => {
// 直接将swiper赋值给this,而不是this.state,因为swiper一直在变化,不用去使用state对比,而且使用state会一直触发setState造成页面的不断渲染
if (!this.swiper) {
this.swiper = node.swiper;
console.log(888888888, this.swiper);
}
};
// 直接使用this.swiper进行取值
handleSlideChange = () => {
let { tabDetailInfo } = this.props;
let gradeList = tabDetailInfo.gradeList;
let index = this.swiper ? this.swiper.activeIndex : tabDetailInfo.showGradeIndex;
this.setState({
currentIndex: index
});
};
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);
}
}
};
return (
<Swiper
{...params}
ref={(node) => {
if (node) {
this.getSwiper(node);
}
}}
>
)