一个比较实用的实例,自上而下循环无缝滚动
- 首先创建一个带有id的元素,id要加给需要滚动的元素
// 在react中元素要写到render中
render() {
//data是上级元素传过来的所以需要对象解构出来。
let {data} = this.props;
this.scrollRow = 1;
return (
<div className={s.container}>
// id要加给需要滚动的元素,也就是子元素们的父元素壳子,这里是ul-li所以给ul加id
//注意一个页面中如果有多个滚动循环组件,务必id不同,否则会出现无法循环的问题
<div className={s.scrollItemBar} id={'scrollBox1'}>
<ul id={'con11'} className={s.ul}>
//循环创建li的函数
{this.createLiOption(data)}
</ul>
// 进行一个判断,li(也就是数据条数)大于20个才显示第二个ul(和第一个一模一样,实现的是无缝效果,实际就是2个ul在连接着滚动)
{data.length >= 20 && <ul id={'con22'} className={s.ul}>
{this.createLiOption(data)}
</ul>}
</div>
</div>
)
}
// 循环创建li的函数(this.createLiOption(data))
//根据接收的数组数据,循环提取,放置展示标签,并返回
createLiOption(data) {
let backData = [];
if (data) {
data.forEach((item, index) => {
let {id, name} = item;
backData.push(
<li className={s.li} key={index}>
<div className={s.pid}>{id}</div>
<div className={s.pname}>{name}</div>
</li>
)
});
return backData;
}
return null;
}
2.在生命周期函数中写滚动函数
componentWillUnmount() {
if (undefined !== this.myTimer) {
clearInterval(this.myTimer);
}
}
componentDidUpdate() {
let box = document.getElementById('scrollBox1');
this.scrollUp();
this.myTimer = setInterval(this.scrollUp, 60);
// 鼠标移入container 元素上 清除定时器 停止滚动
box.onmouseover = () => {
clearInterval(this.myTimer);
}
// 鼠标移出container 元素上 继续滚动
// 60表示每隔60毫秒向上滚动一次
box.onmouseout = () => {
this.myTimer = setInterval(this.scrollUp, 60);
}
}
// 滚动效果的函数
scrollUp() {
let box = document.getElementById('scrollBox1');
let con1 = document.getElementById('con11');
let con2 = document.getElementById('con22');
if (box.scrollTop >= con1.offsetHeight) {
box.scrollTop = 0;
} else {
box.scrollTop++;
}
}
3.样式部分
//样式不唯一,可自行发挥。
.container {
width: 98.5%;
/*height: 28.3%;*/
height: 44.3%;
float: left;
margin-left: 0.5%;
margin-top: 0.5%;
border: #dbdbdb solid 1px;
border-radius: 5px;
position: relative;
background-color: white;
overflow: hidden;
}
.scrollItemBar {
position: relative;
width: 100%;
height: 79%;
overflow: hidden;
margin-top: 0.5%;
}
总结:一个比较实用的react循环滚动小实例,如果有什么问题欢迎大家评论区指出,谢谢大家