scroll-view 可以用来实现轮播图,说到轮播图我们就会想到next 和 prev 按钮。这里来说说怎么next按钮是怎么实现的。
从官方文档上我们可以看到一种实现方法,如下图
2018-11-26_080826.png
但是这种方法有不完善的地方:1.每点击一次按钮都会去便利order数组;2.当当前toView为‘red’(既order数组的最后一个)时,再点next按钮,就会找不到order[i+1]元素;
这里给出另外一种方法,如下图
2018-03-03_100322.png
加多一个
index变量来对应当前的toView就不用内次都去便利order数组了,而且加多一个判断条件,当index大于order数组长度是,既当前toView为“c”时,重置index=0;从而实现了轮播的循环。
其实移动端的轮播图一般是没有next 和 prev 按钮的,这里单把next方法的实现拿出来讲是希望自己在以后的开发和学习中能有个发散的思维和严谨的逻辑。









网友评论