React/JS-停留页面后5s出现一次，一次2s，一次展示一个用户，循环展示多个用户
一、实现效果 ⭐️
二、实现代码 ⭐️
page_home.jsx
import React from 'react';
import homeStore from '@src/store/home'; // 引入接口相关的数据
import './page_home.less'; // 引入css
class Page_home extends React.Component {
constructor(props) {
super(props);
}
// 初始化state
state = {
isShowPrize: false, // 是否展示上一期中奖用户信息
}
async componentDidMount() {
await homeStore.getHomeInfo(); // 调用接口-首页
// 若接口请求失败，则不进行后续操作
if (!homeStore.isSuccess) return;
this.handleLoopShow();
}
// 停留页面后5s出现一次，一次2s，一次展示一个用户，循环展示多个用户
handleLoopShow = () => {
this.prizesTimer = setInterval(() => {
// 若已展示上一期中奖用户信息，则不进行后续操作
if(this.state.isShowPrize) return;
// 展示上一期中奖用户信息
this.setState({
isShowPrize: true,
})
setTimeout(() => {
// 不展示上一期中奖用户信息
this.setState({
isShowPrize: false,
}, () => {
const {
// 上一期中奖用户信息
preCyclePrizeInfoList,
} = homeStore;
// 删除数组里第一个数据
preCyclePrizeInfoList.shift();
if (preCyclePrizeInfoList?.length === 0) {
// 注意：一定要深拷贝，不然homeStore.homeData.preCyclePrizeInfoList里的数据也会跟着变成空数组
const newPrizesList = JSON.parse(JSON.stringify(homeStore?.homeData?.preCyclePrizeInfoList));
// 若数据展示完一波了，就再赋值一波数据进去，无限循环这些数据
homeStore.setPreCyclePrizeInfoList(newPrizesList);
}
})
}, 2000)
}, 5000)
}
componentWillUnmount() {
clearInterval(this.prizesTimer); // 关闭定时器
}
render() {
const {
// 上一期中奖用户信息
preCyclePrizeInfoList,
} = homeStore;
const {
// 是否展示上一期中奖用户信息
isShowPrize,
} = this.state;
return (
<div className="page_home">
{
/* 上一期中奖用户信息 */}
{
preCyclePrizeInfoList?.length > 0 && isShowPrize && (
<div className="prizeList">
<span className="congratulation_bg"></span>
{
/* 始终展示数组preCyclePrizeInfoList里的第一个数据 */}
<span className="congratulation_content text-hidden-ellipsis">{
preCyclePrizeInfoList[0].nickname} 瓜分{
preCyclePrizeInfoList[0].level} <span>{
preCyclePrizeInfoList[0].money}</span>元红包</span>
</div>
)
}
</div >
);
}
}
export default Page_home;
page_home.less
.page_home {
width: 750px;
height: 100vh;
background-color: pink;
/** 上一期中奖用户信息 */
.prizeList {
width: 699px;
height: 185px;
left: 26px;
top: 44px;
position: absolute;
/** 背景 */
.congratulation_bg {
width: 699px;
height: 185px;
left: 0px;
top: 0px;
position: absolute;
/* 注意：背景图片的位置和背景图片的宽高之间要加'/'哟 */
background: #fff url('../../assets/common/bg.png') no-repeat center/cover;
}
/** 文案 */
.congratulation_content {
width: 682px;
height: 46px;
left: 10px;
top: 87px;
position: absolute;
font-size: 36px;
line-height: 40px;
color: rgba(135, 73, 15, 1);
text-align: center;
white-space: nowrap;
span {
color: #ac0000;
font-size: 48px;
}
}
}
}
store/home.js
这是接口相关滴代码~
import API from "@src/api";
import {
makeAutoObservable } from 'mobx';
const homeStore = makeAutoObservable({
/** 首页 */
// 首页数据
homeData: {
},
setHomeData(data) {
this.homeData = data;
},
// 首页接口是否请求成功
isSuccess: null,
setIsSuccess(data) {
this.isSuccess = data;
},
// 上一期中奖用户信息
preCyclePrizeInfoList: [],
setPreCyclePrizeInfoList(data) {
this.preCyclePrizeInfoList = data;
},
async getHomeInfo() {
const {
data, success } = await API.getHomeInfo(); // 请求接口-首页
// 设置 首页接口是否请求成功
this.setIsSuccess(success);
if (data && success) {
// 设置 首页数据
this.setHomeData(data);
const {
// 上一期中奖用户信息
preCyclePrizeInfoList,
} = data;
// 深拷贝
const newPrizesList = JSON.parse(JSON.stringify(preCyclePrizeInfoList));
// 赋值
this.setPreCyclePrizeInfoList(newPrizesList);
}
},
})
export default homeStore
