如何用React原生代码实现头像滚动展示效果示例？

本文共计1060个文字，预计阅读时间需要5分钟。

本文介绍了如何使用React和原生实现头像滚动播放的示例。以下是一个简单的实现方法：

所需效果：- 实现头像滚动播放的效果。

实现步骤：

1.使用React创建一个头像列表。

2.使用CSS3的`transform`属性实现头像的滚动效果。

代码示例：

jsx

import React, { useState } from 'react';import './App.css';

function App() { const [index, setIndex]=useState(0); const images=[ 'https://example.com/image1.jpg', 'https://example.com/image2.jpg', 'https://example.com/image3.jpg', // ...更多头像图片 ];

const nextImage=()=> { setIndex((prevIndex)=> (prevIndex + 1) % images.length); };

return ( );}

export default App;

css.carousel { width: 200px; height: 200px; overflow: hidden; position: relative;}

.carousel img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; transition: transform 0.5s ease-in-out;}

.carousel img.active { transform: translateX(-100%);}

使用方法：

1.将上述代码保存为`App.js`。

2.创建一个名为`App.css`的CSS文件，并将上述CSS代码保存到该文件中。

3.在React项目中引入并使用`App`组件。

效果展示：

点击下一张按钮，可以看到头像依次滚动播放。

本文介绍了react 原生实现头像滚动播放的示例，分享给大家，具体如下：

之前需要的是下面这个效果

现在。。。

憋说话，先看看效果。

感觉很简单呀，直接渲染，transform就可以了，嗯嗯，是的没错。

渲染出来，获取元素，然后添加css，美中不足衔接不是很顺畅，不过还是做出来了。

<div className="avatar-transform" ref={this.tmall}> {!!personAvatar.length && personAvatar.map((item, index) => { return <div className="avatar-wrap" key={index}> <div><img src={item.avatar} alt="" /></div> <div className="avatar-name">{item.nickname.substring(0, 2)}***已参与活动</div> </div> })} </div>

changeCss(){ if(this.index === 31){ this.tmall.current.style = `transform: translateY(${this.index * 4}rem);` this.getAvatar()//获取数据 this.index = 0 return } this.tmall.current.style = `transform: translateY(-${this.index * 4}rem);transition: all 1s ease;` ++this.index setTimeout(()=>{ this.changeCss() },3000) }

但是问题还是来了

一次性返回几百条数据，什么鬼，难道还直接渲染吗，我的天，100多个，渲染出来，那酸爽，得了吧，全部渲染出来是不可能的了，这辈子都不可能全部渲染出来的了，看一下有没什么方法没有。

网上搜了一下，搜出来的是什么鬼，算了算了，还是得自己写

思路：想了一下，可不可以，在后面添加一个节点，然后删除最前面的节点

嗯？好像可以

还是原来的配方原来的味道

<div className="avatar-transform" ref={this.tmall}> {!!personAvatar.length && personAvatar.map((item, index) => { return <div className="avatar-wrap" key={index}> <div><img src={item.avatar} alt="" /></div> <div className="avatar-name">{item.nickname.substring(0, 2)}***已参与活动</div> </div> })} </div>

getAvatar(target = false) { //获取数据 http.get('********').json(r => { if (r.error) { return Alert(r.msg); } //判断一下，不是第一次请求 if (target) { this.listData = r.users this.changeCss() return } //装起来 this.listData = r.users this.setState({ personAvatar: this.listData.splice(0, 5) //先来5个 }) //最开始是在下面的transform: translateY(7rem)，所以得上来 this.tmall.current.style = `transform: translateY(0);transition: all 1s ease;` setTimeout(() => { this.changeCss() }, 3000) }); }

.avatar-transform { transform: translateY(7rem); }

changeCss() { let data = this.listData.shift() if (!data) { this.getAvatar(1) return } let div = document.createElement('div') div.className = "avatar-wrap" div.innerHTML = `<div><img src='${data.avatar}' alt="" /></div> <div class="avatar-name">${data.nickname.substring(0, 2)}***已参与活动</div>` this.tmall.current.style = `transform: translateY(-${4}rem);transition: all 1s ease;` this.tmall.current.appendChild(div) //添加节点 setTimeout(() => { this.tmall.current.style = `transform: translateY(0);` this.tmall.current.removeChild(this.tmall.current.childNodes[0]) //删除第一个节点 }, 1000) setTimeout(() => { this.changeCss() }, 3000) }

到此这篇关于react 原生实现头像滚动播放的示例的文章就介绍到这了,更多相关react 头像滚动播放内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！