Vueの読み込みアニメーションを実装し、同時にURLから画像を読み込みます
<p>画像の読み込み時に読み込みアニメーションを表示したいのですが、どうすれば実現できるのかわかりません。 <br /><br />ローダーがないのですが、デバッグしてコンソールに「true」と「false」が表示されましたが、やはりローディングアニメーションが出ません。 </p>
<pre class="brush:php;toolbar:false;"><テンプレート>
<div class="キングオブマウンテン">
<スピナー v-if="isLoading"/> //// エラー
<div v-else class="コンテナ">
<div v-if="!isEndGameKing" class="choices">
<p id="スコア">{{ 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="セカンドフィルム.ポスター" :alt="セカンドフィルム.タイトル" @click="chooseRightFilm">
<p id="title--film">{{ SecondFilm.title }}</p>
</div>
</div>
</div>
<div v-else class="勝者">
<p id="winner--title">Победитель</p>
<img :src="firstFilm.Poster" :alt="firstFilm.title">
</div>
</div>
</div>
</テンプレート>
<スクリプト>
「@/mixins/game」からゲームをインポートします。
"@/components/Spinner/Spinner" から Spinner をインポートします。 // css ですべて問題ありません。それは動作します
デフォルトのエクスポート {
名前: 「キング・オブ・マウンテン」、
データ（） {
戻る{
isLoading:false
}
}、
コンポーネント: {スピナー}、
メソッド: {
chooseLeftFilm() {
this.isLoading=true
this.redirectToResultKing() // これはミックスインのメソッドです (すべて問題なく動作します)
this.isLoading=false
}、
ChoiceRightFilm() {
this.isLoading=true
this.firstFilm = this.secondFilm;
this.redirectToResultKing() // これはミックスインのメソッドです (すべて問題なく動作します)
this.isLoading=false
}
}、
}
</script></pre>
<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;">デフォルトのエクスポート {
メソッド: {
updateFilm() {
// ここでは、Vuex からランダムに 2 つの画像を取得し、それらを削除します...
this.currentCountKing ;
this.allFilmsKingCopy = this.allFilmsKingCopy.filter(val => val !== this.secondFilm)
this.secondFilm = this.allFilmsKingCopy[Math.floor(Math.random() * this.allFilmsKingCopy.length)]
}、
redirectToResultKing() {
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;">デフォルトのエクスポート {
州： {
映画: []、
}、
行動： {
async getFilms({commit}) {
const data = await fetch(URL);
const dataResponse = await data.json();
const フィルム=dataResponse.data
commit("setData", フィルム)
}、
}、
突然変異: {
setData(状態, フィルム) {
state.films = フィルム
}、
}、
ゲッター: {
ALL_FILMS(状態) {
state.films を返す
}、
}
}</pre>
<p><br /></p>
