用小程序做一个轮盘抽奖机

某天应需求，做一个类似于抽奖机一样的东西。
当时很愁啊，什么东西，没头绪，最后左思右想，看来只能这样了，先上效果图：

效果图

1. 首先先来设定好样式
   假设有12条项目，然后每一条都有自己的类名：类名 + index

   
   
   类名 + index

   之后给这些都加上选中后的样式
   （这里我不太会描述，就是说前面的类型是生成的，我们只需要改变后面的类名就可以实现变的效果）

   
   
   image.png
   
   现在 .panel2_square* 已经有了，那么我们只需要变的就是后面的 green*
   
   设定好的样式

2. 定义事件与数据

// 1.先来设置要显示的顺序
    const list = ['green0', 'green3', 'green4', 'green5', 
                 'green6', 'green7', 'green8', 'green11', 
                 'green10', 'green9', 'green2', 'green1'];
    //在这里因为需求是要逆时针转，所以就事先设定好逆时针转的顺序

//2.  在data中初始化一下一会儿要变的标志
      //data
      data:{
           panel2Green:'',
      }
      
      //运行的方法，初始化一下，第一个显示左上角
      this.setData({ panel2Green:'green0'});

//3.开始
      let flag = 0; //这个是用来判断当前旋转的状态：是刚开始还是进行中还是结束中
      let timer = 800; //设定初始的时间
        //设定一个计时器，一会要递归调用的
      let timeFn = ()=>{
          if (flag == 0){//判断如果是0，那么就是刚开始，则运行间隔时间是越来越短
               timer -= (200 - (Math.random() * 100));
          }else if(flag == 1){//判断如果是1，那么就是在进行中了，则运行间隔时间是越来越长
               timer += (100 + (Math.random() * 100));
          }else {//最后如果是2，那么就是已经停止，所以直接return就可以了
                return;
           }
           //判断间隔如果小于100了，那么就阻止其继续变小，设为100，目的是转的不要太快；
          //反之阻止变大，目的是不要太慢了
           timer <= 100 && (timer = 100);
           timer >= 1000 && (timer = 1000);
            
           let moveSquare = setTimeout(() => {
               
              // 找到当前的数据的下标，然后下标加一，就是下一个要显示的了
                let reusltIndex = list.findIndex((item, index) => {
                      return item == this.data.panel2Green;
                })
                  // 等于11时，则转换为-1,为了加一后重回0
                  reusltIndex == 11 && (reusltIndex = -1);
                  this.setData({
                      panel2Green: list[reusltIndex + 1]
                  })
                //最后继续递归运行
                timeFn()
             }, timer)

        };
//上来先调用一下，要不然不动
timeFn();
setTimeout(() => {
      // 3.7s之后将timer降到最低
      flag = 1;
}, 3700)
setTimeout(() => {
    // 5s之后停止
      flag = 2;
      // 展示这条信息
    this.data.panel2Green
}, 5000)

//就这样结束，感觉说的不是很清楚，随缘吧！