小程序的问题 9小时课程

var order = ['red', 'yellow', 'blue', 'green']
Page({
  data: {
    toView: 'red',
    scrollTop: 0
  },
  upper: function (e) {
    console.log(e)
  },
  lower: function (e) {
    console.log(e)
  },
  scroll: function (e) {
    console.log(e)
  },
  tap: function (e) {
    for (var i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1]
        })
        break
      }
    }
  },

    tapMove: function(e) {
      this.setData({
        scrollTop: this.data.scrollTop + 20
      })
    }
  })

小程序Scroller-view 9小时的课程第31讲 这里为什么能够实现点击一下切换到下一个以及最后一个接到第一个？i每次都是从0开始啊

补充wxml代码

<view class="container">
  <template is="head" data="{{title: 'scroll-view'}}"/>

  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title">
        <text>Vertical Scroll\n纵向滚动</text>
      </view>
      <view class="page-section-spacing">
        <scroll-view scroll-y="true" style="height: 300rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
          <view id="demo1" class="scroll-view-item demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item demo-text-2"></view>
          <view id="demo3" class="scroll-view-item demo-text-3"></view>
        </scroll-view>
      </view>
    </view>
    <view class="page-section">
      <view class="page-section-title">
        <text>Horizontal Scroll\n横向滚动</text>
      </view>
      <view class="page-section-spacing">
        <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
          <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item_H demo-text-2"></view>
          <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
        </scroll-view>
      </view>
    </view>
  </view>
    <view class="container">
  <template is="head" data="{{title: 'scroll-view'}}"/>

  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title">
        <text>Vertical Scroll\n纵向滚动</text>
      </view>
      <view class="page-section-spacing">
        <scroll-view scroll-y="true" style="height: 300rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
          <view id="demo1" class="scroll-view-item demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item demo-text-2"></view>
          <view id="demo3" class="scroll-view-item demo-text-3"></view>
        </scroll-view>
      </view>
    </view>
    <view class="page-section">
      <view class="page-section-title">
        <text>Horizontal Scroll\n横向滚动</text>
      </view>
      <view class="page-section-spacing">
        <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
          <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item_H demo-text-2"></view>
          <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
        </scroll-view>
      </view>
    </view>
  </view>

1、tap标签每次在你点击的时候都会重新运算，那i自然是每次从0开始了，毕竟**它只是一个局部变量**。
2、判断句中的表达式如果true，会通过setDate设置toView的当前值的下一个索引的。
3、你这个代码段是不包含末尾连接到0索引，你需要看setData这个函数里面的内容，你这里没有，它应该建立了一个判断值，如：
if(this.data.toView === undefined)toView:order[0];这类做法的。

最后，原谅我不继续学习，我没见过这种js的写法。

wxml的代码有吗，补一下看看
因为不知道你页面代码，所以不太清楚你想要的效果是什么，但是颜色轮换的话将tap方法改成这样应该可以

tap: function (e) {
    for (let i = 0; i < order.length; i++) {
      console.log(i);
      if (order[i] === this.data.toView) {
        if (order.length === i+1) {
          i = -1;
        }
        this.setData({
          toView: order[i + 1]
        })
        break
      }
    }
  }