用React完成一个图片轮播组件_第1页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、用react完成一个图片轮播组件用法react实现上述功能，首先，划分组件：组件slidem代表中图组件，其始终维护一个state:currentmindex,即当前的中图的index值。组件slides代表小图组件，要维护两个state:currentsindex，currentspage,即当前的小图的index值和小图当前的页数；外层组件slidems接受几个参数作为props：,document.getelementbyid(&39;js-img-slide&39;);slidem、slides再从slidems中猎取参数举行内部渲染。self.setsmallinde

2、x(index)/>self.setmediumindex(index)/>当点击中图的切换按钮时，计算偏移量，然后将新的currentmindex传递给父组件，父组件setstate通知两个子组件currentmindex发生了转变；小图组件中涉及的计算比较多，可以将这些抽成办法，例如：按照给定的中图宽度计算一页有几张小图、计算小图总页数、按照给定的index值推断小图处于当前哪一页等。当点击小图组件的左右箭头时，计算的偏移量（首先计算一张中图里有几张小图），然后setstate修改小图currentspage的值。父组件setstate通知两个子组件currentmindex发生了转变；中图、小图组件分离在componentwillreceiveprops里接收到了新的值的转变后，重新setstate，更新组件内部的state，就实现了两者之间的通信。以上是实现的一个思路。在实际应用中，场景会复杂一些，例如，第一张可能存在播放视频的需求，还有当点击中图时，能切换到大图模式，大图模式下能正常轮播，并且在关闭大图模式时，中图和小图自动定位到刚才最后一张扫瞄的。这时会涉及略微复杂一些的运算，需要在此基础上做一下兼容。十分难堪的一点：轮播时的动画

人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论