vue 구성 요소 이동 단 9 궁 격 룰렛 추첨 실현

본 논문 의 사례 는 vue 구성 요소 가 이동 단 구 궁 격 룰렛 추첨 을 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
vue-lucky-draw
이동 단 구 궁 격 룰렛 추첨 vue 구성 요소,당 첨 된 상품 데 이 터 는 인터페이스 에서 결정 합 니 다.
효과 도

추첨 하 다
당 첨 결 과 는 백 스테이지 에서 돌아 오 는 것 이기 때문에 룰렛 의 최종 정지 위 치 를 고려 하려 면 백 스테이지 에서 결 과 를 되 돌려 주 는 상품 의 위치,즉 이 당 첨 과정 을 모 의 해 야 한다(그래서 추첨 이란 모두 거짓말 이다,헤헤).이동 하 는 배경 상자 에 대응 하 는 각 위치의 css 를 작성 한 다음 클 라 스 를 동적 으로 전환 하여 회전 효 과 를 보 여 줍 니 다.과정 을 알 면 쓰기 쉽다.
중간 단 추 는 css 3 의 animation 을 사용 합 니 다.이 상품 은 한 장의 그림 에 합 쳐 져 있 습 니 다.당신 도 8 장의 작은 그림 으로 나 눌 수 있 습 니 다.그러면 더 많은 스타일 을 써 야 합 니 다.

//   
 handleStart() {
 if (this.isRuningLucky) {
  return Toast("     ...");
 }
 if (isNaN(Number(this.initSpeed))) {
  return false;
 }
 this.speed = this.initSpeed;
 //     
 this.isRuningLucky = true;
 this.time = Date.now();
 this.drawAward();
 Toast("    ");
 },
 drawAward() {
 //     ，        (       2s)
 setTimeout(() => {
  this.award = {
  id: "4"
  };
  console.log("        ", this.award);
 }, 2000);
 this.move();
 },
 move() {
 let timer = setTimeout(() => {
  this.current++;
  if (this.current > 7) {
  this.current = 0;
  }
  //       id  ，       
  if (this.award.id && (Date.now() - this.time) / 1000 > 2) {
  console.log("     ");
  this.speed += this.diff; //     
  
  //        4 ，    id        id，    
  if (
   (Date.now() - this.time) / 1000 > 4 &&
   this.award.id == this.awards[this.current].id
  ) {
   clearTimeout(timer);

   setTimeout(() => {
   this.isRuningLucky = false;
   //             （     ）
   Toast(
    "       " + this.awards[this.current].name + ",  id " + this.awards[this.current].id
   );
   }, 400);
   return;
  }

  //          ，     
  } else {
  if (this.speed >= 50) {
   this.speed -= this.diff; //     
  }
  }

  this.move();
 }, this.speed);
 },

번호 스크롤
무질서 목록 을 사용 하여 번호 목록(정상적으로 인터페이스 에서 가 져 오기)을 순환 시 키 고 시간 설정 과 transition 의 속성 을 제어 하여 틈새 없 는 연결 효 과 를 얻 습 니 다.스타일(li 높이)이 바 뀌 면 타이머 시간 을 조절 해 야 합 니 다(다음 표시 시간 을 제어 합 니 다).

//       
 scroll() {
 this.animate = true;
 let timer = setTimeout(() => {
  this.list.push(this.list[0]);
  this.list.shift();
  this.animate = false;
 }, 500);
 }

기능 코드 는 제 것 으로 옮 겨 주세요GitHub
클 론 프로젝트 npm i,npm run dev 가능 합 니 다.마음 에 드 시 면 별 을 눌 러 주세요 ~
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.