当前位置: 首页 > Web前端 > HTML

网易音乐版轮播-react组件版

时间:2023-04-02 15:51:24 HTML

说明:本版本轮播图是根据网易云音乐PC播放器首页轮播图制作的。网易轮播的特别之处在于,如果滑动不相邻的两张图片,转场效果不是滑动转场,而是跳跃转场。这个原则与轮播布局的初始设计非常相关。.这个旋转木马是在纯反应环境中用es6编写的。通过对状态中的数组进行重组排列,使其与风格相匹配。没有依赖就可以实现轮播的效果。最终的效果就是将react组件的开放接口进行封装并发布。注:本文为正推,待开发完成后进行总结优化。1.建筑架构这方面的文章应该很多,我就不用过多介绍了。随便去github找个react脚手架搭建一个基本的项目框架。我使用的框架是dva框架的改进版。github上有很多react脚手架。建议选择一种进行改进。我用的那个可能不适合你。二、准备材料1、相同尺寸的图片4张以上。(我把这八张图命名为1-8)2.React环境3.网易云PC播放器3.开发先放第一张图和左右两边能看到的图片。初始的静态结构是这样的新手注意:如果你觉得代码很吸引眼球,less和es6语法会自己补上importReactfrom'react';从“./Slide.less”导入样式;classSlideextendsReact.Component{constructor(props){super(props);this.state={dir:[{name:'middle'},{name:'start'},{name:'normal'},{name:'normal'},{name:'normal'},{name:'正常'},{名称:'正常'},{名称:'结束'},],};}render(){const{dir}=this.state;return({/*外部容器*/}{/*内部循环*/}{dir.map((item,key)=>{return(//这里懒惰<div//遮罩className={styles.masking}>{''}

);})}
);}}exportdefaultSlide;less如下.root{width:100%;背景:#ccc;.slideBox{宽度:50%;身高:15vw;保证金:0自动;位置:相对;背景:#ccc;100%;}.masking{//遮罩,带有灰度渐变效果position:absolute;左:0;顶部:0;宽度:100%;高度:100%;背景:rgba(0,0,0,.15);}&.middle{//这是中间那个left:10%;底部:0%;宽度:80%;z-指数:33;}&.start{//第一个就是左边那个left:0%;底部:0%;宽度:75%;z-指数:22;}&.end{//最后一位和右边一位:0%;底部:0%;宽度:75%;z-i指数:22;}&.normal{//这是隐藏图片的样式left:13%;底部:0%;宽度:74%;z-指数:11;}}}}这样初始位置就做好了隐藏图片的位置很重要,因为上面说了在滑动图片的时候需要改成跳出效果。大概在下面这个位置,展示的图片完美挡住了。接下来,添加事件。让我们忽略轮播下方的导航点行。首先添加左右点击操作。将onClick操作添加到mask层(也可以添加到slide层)如下:这个。slide(item.name,key)}>{''}点击图片时的方法slide(name,key){//图片点击逻辑//记录当前节点this.setState({current:钥匙});//数组操作方法this.imgArr(name);}数组操作方法imgArr(name){//数组处理letdirCopy=this.state.dir;if(name==='start'){//点击左侧constpop=dirCopy.pop();//从数组末尾弹出一个元素dirCopy.unshift(pop);//将尾部元素添加到数组头部}elseif(name==='end'){//点击右边那个constshift=dirCopy.shift();//从数组头部弹出一个元素dirCopy.push(shift);//添加到数组的末尾}this.setState({dir:dirCopy});//保存重排后的数组并触发渲染}过渡样式添加1.过渡样式主要包括遮罩层旋转时的渐变。2.旋转时定位过渡平滑。3.旋转时关卡的变化在优化环节单独说明。.slide{...,//这个保留给原来的样式(后面的规则会显示)transition:all0.3sease-in-out;用户选择:无;//禁止用户选择(防止图片选择时改变颜色);&:hover{//当鼠标经过光标时显示小手样式:pointer;}}.masking{...,transition:all0.3s0.2slinear;}&.middle{...,.掩蔽{背景:透明;}}这样,当你点击图片的左右两边时,就可以初步旋转了。到此为止的步骤完成的样式轮播就是最基本的“轮播es6版”。有需要的朋友已经可以对上面的代码进行优化总结,放到自己的项目中了。菜单按钮开发根据图片个数动态循环出菜单按钮个数,代码类似图片循环。...,{/*导航按钮*/}{this.state.dir.map((item,key)=>{//根据图片数量循环return(this.pointFunc(key-1)}//鼠标进入动画>{});})}style:.point{width:100%;位置:绝对;左:0;底部:-23px;z-指数:999;文本对齐:居中;span{显示:内联块;宽度:20px;高度:3px;背景色:#2E3033;左边距:9px;&.hover{背景色:#7F8082;}&:hover{光标:指针;}}}鼠标进入方法pointFunc();pointFunc(index){//按钮点击const{current}=this.state;constdirCopy=this.state.dir;如果(索引<当前){//鼠标经过左边的按钮for(leti=0;i<(current-index);i+=1){//确定距离constshift=dirCopy.shift();//执行数组操作dirCopy.push(shift);}}elseif(index>current){//鼠标悬停在右键上for(leti=0;i<(index-current);i+=1){constpop=dirCopy.pop();dirCopy.unshift(pop);}}this.setState({dir:dirCopy});//触发react-render重新渲染页面this.setState({current:index});//记录当前图片节点}添加按钮后图效果如下:这个时候核心效果就出来了。经过严格的布局和动画调整,最终实现了网易播放器预期的特殊动画效果(鼠标滑过相邻图片时滑动,非相邻图片时图片按钮改为跳跃效果)。代码效果说明:样式方面还有需要优化的地方,请自行调整。总结在这个组件化模式发展的时代,如果你所做的东西不能保存和开放,我觉得是一件很悲哀的事情。所以下篇文章会把这个react组件打开,打开一些可调整的接口,响应式处理,最后打包成一个npm包,以插件的形式打开。