Vue 로딩 애니메이션을 구현하고 동시에 URL에서 이미지를 로드합니다.
<p>이미지가 로드될 때 로딩 애니메이션을 표시하고 싶지만 어떻게 해야 할지 모르겠습니다. <br /><br />로더가 없는데 디버깅을 했는데 콘솔에 "true"와 "false"가 표시됐지만 여전히 로딩 애니메이션이 나오지 않았습니다.
<pre class="brush:php;toolbar:false;"><템플릿>
<div class="KingOfMountain">
<Spinner v-if="isLoading"/> //// 오류
<div v-else class="컨테이너">
<div v-if="!isEndGameKing" class="choices">
<p id="score">{{ currentCountKing }}/{{ ALL_FILMS.length - 1 }}
<p/>
<div class="사진">
<div class="first__film">
<img :src="firstFilm.Poster" :alt="firstFilm.title" @click="chooseLeftFilm">
<p id="title--film">{{ firstFilm.title }}</p>
</div>
<div class="second__film">
<img :src="secondFilm.Poster" :alt="secondFilm.title" @click="chooseRightFilm">
<p id="title--film">{{ secondFilm.title }}</p>
</div>
</div>
</div>
<div v-else class="winner">
<p id="winner--title">Победитель</p>
<img :src="firstFilm.Poster" :alt="firstFilm.title">
</div>
</div>
</div>
</템플릿>
<스크립트>
"@/mixins/game"에서 게임을 가져옵니다.
"@/comComponents/Spinner/Spinner"에서 Spinner를 가져옵니다. //CSS에서는 모두 괜찮습니다. 효과가있다
기본값 내보내기 {
이름: "KingOfMountain",
데이터() {
반품{
isLoading:거짓
}
},
구성요소: {Spinner},
방법: {
chooseLeftFilm() {
this.isLoading=true
this.redirectToResultKing() // 믹스인의 메서드입니다(모두 좋음, 작동합니다).
this.isLoading=false
},
chooseRightFilm() {
this.isLoading=true
this.firstFilm = this.secondFilm;
this.redirectToResultKing() // 믹스인의 메서드입니다(모두 좋음, 작동합니다).
this.isLoading=false
}
},
}
<p>如果我使用，它会显示加载动画：</p>
<pre class="brush:php;toolbar:false;">chooseLeftFilm() {
this.isLoading=true
this.redirectToResultKing() // 믹스인의 메서드입니다(모두 좋음, 작동합니다).
},</pre>
<p>// 영원히 회전할 것입니다</p>
<p>저희가 如何更好地加载动画?</p>
<p>내가 좋아하는 混入(믹스인):</p>
<pre class="brush:php;toolbar:false;">기본값 내보내기 {
방법: {
업데이트필름() {
// 여기서는 Vuex에서 무작위로 2개의 이미지를 가져온 다음 삭제하는 등의 작업을 수행합니다.
this.currentCountKing++;
this.allFilmsKingCopy = this.allFilmsKingCopy.filter(val => val !== this.secondFilm)
this.secondFilm = this.allFilmsKingCopy[Math.floor(Math.random() * this.allFilmsKingCopy.length)]
},
리디렉션ToResultKing() {
if (this.currentCountKing === this.ALL_FILMS.length - 1) {
this.isEndGameKing = true
} 또 다른 {
this.updateFilm()
}
}
},
계산됨: {
...mapGetters(['ALL_FILMS']),
},</pre>
<p>나의 Vuex:</p>
<pre class="brush:php;toolbar:false;">기본값 내보내기 {
상태: {
영화: [],
},
작업: {
비동기 getFilms({commit}) {
const 데이터 = 가져오기(URL)를 기다립니다;
const dataResponse = data.json()을 기다립니다.
const 영화=dataResponse.data
커밋("setData", 영화)
},
},
돌연변이: {
setData(상태, 영화) {
state.films = 영화
},
},
게터: {
ALL_FILMS(상태) {
반환 상태.필름
},
}
}</pre>
<p><br /></p>
