vue+swiper 좌우 슬라이딩 테스트 문제 기능 구현

최근 에 테스트 문 제 를 풀 고 있 습 니 다.앞 뒤로 문 제 를 바 꿀 수 있 습 니 다.단 추 를 누 르 면 답 을 선택 하고 답 을 선택 하 는 동시에 버튼 의 배경 색 을 바 꿀 수 있 습 니 다.다음 그림 과 같 습 니 다.

초기 코드
나 는 vue 와 swiper 를 썼 다.모든 문 제 는 대상 배열 입 니 다.v-for 를 통 해 렌 더 링 합 니 다.

<swiper ref="mySwiper" :options="swiperOptions">
 <swiper-slide v-for="(item, index) in listData" :key="index">
  <div class="question-box">
   <div class="idx">-  {{ index+1 }}  -</div>
   <div class="question">{{ item.question }}</div>
  </div>
  <button @click="goNext(index, 'a')" :class="item.answer=='a' ? 'active': ''"> </button>
  <button @click="goNext(index, 'b')" :class="item.answer=='b' ? 'active': ''"> </button>
 </swiper-slide>
</swiper>

처음에 저 는 모든 문제 의 answer 를 대상 에 저장 하고 단 추 를 눌 렀 을 때 answer 의 값 을 바 꾸 었 습 니 다.button 의 동적 class 는 값 이 바 뀌 면 배경 색 의 변 화 를 일 으 킬 수 있 습 니 다.js 부분:

goNext(index, answer) {
 this.$set(this.listData[index], 'answer', answer)
 this.swiper.slideNext(100)
},

문제점 을 발견 하 다
테스트 결과 에 따 르 면 이렇게 클릭 이벤트 와 동적 스타일 을 서로 의존 하면 약 몇 백 밀리초 의 지연 을 초래 하여 slideNext()를 실행 할 수 있 고 직관 적 으로 느 낄 수 있 는 지연 이다.디 버 깅 을 통 해 지연 을 초래 하 는 두 가지 원인 을 발견 했다.

this.$set배열 변경

에서 class 까지 중간 에 도 지연 이 있다.

그래서 저 는 생각 을 바 꾸 었 습 니 다.모든 문제 의 answer 를 배열 에 넣 지 않 고 data 에서 answerMap 을 정의 하여 문 제 를 해결 하 였 습 니 다.문제 해결 2 를 위해 저 는 동적 스타일:class을 제거 하고 원생 js 로 클릭 이벤트 에서 class 를 직접 수정 하 는 것 으로 바 꾸 겠 습 니 다.이렇게 두 걸음 내 려 오 니 확실히 지연 되 는 것 을 볼 수 없다.
최 적 화 된 코드
html 부분

<button @click="goNext($event, index, 'a')"> </button>
<button @click="goNext($event, index, 'b')"> </button>

js 부분

goNext(e, index, answer) {
 const element = e.target
 const bro = element.parentNode.children
 for (let i = 0; i < bro.length; i++) {
  if (bro[i] !== element) {
   bro[i].classList.remove("active")
  }
 }
 element.classList.add('active')
 this.answerMap[this.listData[index].question] = answer
 this.swiper.slideNext(100)
},

테스트 결과:반 갑 습 니 다.slideNext()는 더 이상 육안 으로 볼 수 있 는 지연 이 없습니다.
코드 를 적 게 쓰기 위해 자신 도 모 르 게 성능 을 희생 하 는 경우 도 있다.이번 실천 은 원생 JS 가 나 로 하여 금 여러 줄 의 코드 를 증가 시 켰 지만 가 져 온 성능 향상 도 매우 뚜렷 하 다.이번 최 적 화 를 통 해 Vue 소스 코드 를 잘 이해 하 는 사람 은 아마 최적화 점 을 바로 알 수 있 을 것 이 라 고 생각 합 니 다.나 는 비록 소스 코드 를 한 번 보 았 지만,여전히 깊이 이해 하지 못 했다.배 울 게 많 네요.
vue+swiper 가 좌우 로 미 끄 러 지 는 테스트 문제 기능 을 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 좌우 로 미 끄 러 지 는 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부탁드립니다!