想要实现轮播效果，首先安装时间定时器
接下来就是在我们的项目中使用定时器
接下来我们将竖着的轮播图变成横着的
接下来我们调整间距
我们知道轮播图下方，还有5个圆点，那我们怎么做呢？
拿到每一个圆点
看对应的样式
关于当前样式和小圆点颜色的改变
见成品图
我们要达到的效果是，哪一个轮播图在前面，对应的小圆点就变色
我们在每一帧滚动结束的时候，进行调用对应的函数
通过偏移量与宽度比求对应页面，再更新状态机
最后再看效果图
我们发现我们的轮播图一直都是手动的，我们需要使用定时器让其自动播放
我们设置固定的每一帧的时间
当轮播图挂载上去的时候，我们是要直接插入对应的html值的
当添加定时器对应的页数改变了，对应的状态也是会改变的
当我们手动拖拽轮播图
开始拖拽时停止定时器
当我们停止拖拽
当调用停止拖拽的时候，我们调用定时器让其自动轮播
好了来自reactnative的轮播图就完成了~
本文升华自reactnative视频教程
详细demo见我的github：https://github.com/jserjser/reactwebapp/blob/master/myapp/scrollview.js
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
我要评论
网友评论