想要实现轮播效果,首先安装时间定时器 接下来就是在我们的项目中使用定时器 接下来我们将竖着的轮播图变成横着的 接下来我们调整间距 我们知道轮播图下方,还有5个圆点,那我们怎么做呢? 拿到每一个圆点 看对应的样式 关于当前样式和小圆点颜色的改变 见成品图 我们要达到的效果是,哪一个轮播图在前面,对应的小圆点就变色 我们在每一帧滚动结束的时候,进行调用对应的函数 通过偏移量与宽度比求对应页面,再更新状态机 最后再看效果图 我们发现我们的轮播图一直都是手动的,我们需要使用定时器让其自动播放 我们设置固定的每一帧的时间 当轮播图挂载上去的时候,我们是要直接插入对应的html值的 当添加定时器对应的页数改变了,对应的状态也是会改变的 当我们手动拖拽轮播图 开始拖拽时停止定时器 当我们停止拖拽 当调用停止拖拽的时候,我们调用定时器让其自动轮播 好了来自ReactNative的轮播图就完成了~
本文升华自ReactNative视频教程 详细demo见我的github:https://github.com/JserJser/reactWebApp/blob/master/MyApp/scrollView.js
本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728