Swiper/React-解决swiper处理动态数据出现样式紊乱、抖动问题
First of all，检查自己在push数据前是否先清空了数组：
- 若已清空，请直接往下看👁👁哦；
- 若未清空，请先清空数组（可查看我的另外一篇文章），再继续往下看👁👁哦~
一、开门见山 ⭐️
图1：【正确样式】✅
图2：【紊乱样式】❌
- 🎀 需求 —— 弹幕式轮播（如上 图1）：
- 1、分为上下两部分，且交错展示；
- 2、轮播同时开始、速度匀速，且无限循环，即 跑马灯效果🧃；
- 3、后端每次返的数据是随机的；
- 🎀 实现方法 ——
swiper：
- 1、上下两部分 -> 采用两个
swiper，交错展示 -> 给下swiper的swiper-container加上padding-left值：
- 基于
react的swiper可以查看我的另外两篇文章喔：🌹
swiper3-> react-swiper3的运用；swiper6-> react-swiper6的使用；- 2、轮播同时开始、速度匀速，且无限循环 -> 跑马灯效果🧃，可以查看我的另外一篇文章喔：🌹
- swiper-实现跑马灯效果（
swiper6的实现方式与其相同，只是写法不同，具体用法，请往下看哦☺️，我会以swiper6写个案例）；- 3、由于是动态数据，出现
bug描述如下：💥
- 当进入弹窗/其他页面后，再次返回页面时，这两个
swiper会先抖动一下，然后出现样式紊乱问题（如上 图2）：
- 问题整体描述如下动图：👇🏻👇🏻👇🏻
二、亡羊补牢 ⭐️
Taking into account what we have discussed above, we may safely arrive at a conclusion that
依据我们在上文中讨论的内容，我们可以得出一个结论：
- 解决问题的关键就是解决数据更新问题。
So what do we do❓
在组件卸载及销毁之前 清空掉两个
swiper里的数据。
三、柳暗花明又一村 ⭐️
哒哒哒~🌈 最终没有
bug的效果如下动图啦：
四、小试牛刀 ⭐️
react-swiper6
1、安装swiper6
npm i swiper@6
或者
yarn add swiper@6
2、部分代码
home.jsx
import React from 'react';
import store from '@src/store'; // 引入接口相关数据
import { Swiper, SwiperSlide } from "swiper/react"; // 引入swiper,实现轮播
import 'style-loader!css-loader!swiper/swiper-bundle.css'; // 引入swiper的css
import './home.less';
class Home extends React.Component {
async componentDidMount() {
await store.getHomeData(); // 调用接口-首页
}
// 在组件卸载及销毁之前 清空掉两个`swiper`里的数据。
componentWillUnmount() {
store.setCarouselInfo1([]);
store.setCarouselInfo2([]);
}
render() {
// carouselInfo1: 上swiper数据, carouselInfo2: 下swiper数据
const { carouselInfo1, carouselInfo2 } = store;
return (
<div className="home">
{/* 祝福弹幕【swiper-no-swiping: 禁止手动滑动】*/}
<div className="blessing swiper-no-swiping">
{/* 上swiper */}
{
carouselInfo1?.length > 0 &&
<Swiper
className="blessingItems blessingTop"
slidesPerView={1.25}
speed={3000}
freeMode={true}
loop={true}
autoplay={{
delay: 0,
}}
>
{
carouselInfo1?.map((item, index) => {
return (
<SwiperSlide className="item" key={index}>
{/* 用户祝福背景 */}
<span className="item_bg i-blessing_bg"></span>
{/* 用户祝福文案 */}
<div className="item_texts">
{/* 用户名称 */}
<span className="user_name text-hidden-ellipsis">工行粉丝</span>
{/* 祝福语 */}
<div className="content text-hidden-ellipsis">送出祝福：{item.prizeName}</div>
</div>
</SwiperSlide>
)
})
}
</Swiper>
}
{/* 下swiper */}
{
carouselInfo2?.length > 0 &&
<Swiper
className="blessingItems blessingBottom"
slidesPerView={0.85}
speed={3000}
freeMode={true}
loop={true}
autoplay={{
delay: 0,
}}
>
{
carouselInfo2?.map((item, index) => {
return (
<SwiperSlide className="item" key={index}>
{/* 用户祝福背景 */}
<span className="item_bg i-blessing_bg"></span>
{/* 用户祝福文案 */}
<div className="item_texts">
{/* 用户名称 */}
<span className="user_name text-hidden-ellipsis">工行粉丝</span>
{/* 祝福语 */}
<div className="content text-hidden-ellipsis">送出祝福：{item.prizeName}</div>
</div>
</SwiperSlide>
)
})
}
</Swiper>
}
</div>
</div>
);
}
}
export default Home;
home.less
/** 实现匀速轮播 */
.swiper-container>.swiper-wrapper {
-webkit-transition-timing-function: linear; /*之前是ease-out*/
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
margin: 0 auto;
}
store/index.js
import { makeAutoObservable } from 'mobx';
import API from '../api/index';
const store = makeAutoObservable({
/** 首页 */
// 上假轮播配置
carouselInfo1: [],
setCarouselInfo1(data) {
this.carouselInfo1 = data;
},
// 下假轮播配置
carouselInfo2: [],
setCarouselInfo2(data) {
this.carouselInfo2 = data;
},
async getHomeData() {
const { data, success } = await API.getHomeData(); // 调用接口-首页
if (data && success) {
// 处理假轮播数据，分为上下两部分
this.setCarouselInfo1([]); //【重要】先清空
this.setCarouselInfo2([]); //【重要】先清空
const { carouselInfo } = data; // 假轮播配置
carouselInfo?.length > 0 &&
carouselInfo?.forEach((item, index) => {
if (index % 2 == 0) {
// 上假轮播展示偶数项
this.carouselInfo1.push(item);
} else {
// 下假轮播展示奇数项
this.carouselInfo2.push(item);
}
})
}
}
},
})
export default store
