ホームページ > 記事 > ウェブフロントエンド > ミニ プログラム スワイパー カルーセル CSS3 アニメーションと、指定されたスワイパー項目へのジャンプに使用します
ミニ プログラム スワイパー カルーセル CSS3 アニメーションと、指定されたスワイパー項目へのジャンプに使用します
- hzc転載
- 2020-06-22 11:32:553000ブラウズ
私の WeChat 公開アカウント: フロントエンド育成ロード 、フォロー歓迎です。
解決すべき問題
ここ数日、私は WeChat ミニ プログラム用のスワイパー カルーセルを作成する方法を検討していました。ミニプログラムのコードと H5 バージョンのコードの両方を生成する必要があるため、2 セット記述するのは非効率であるため、uni-app を選択しました。
uni-app基本コンポーネント スワイパーでカルーセル アニメーションをすでに直接サポートしています。
私が主に解決する必要があるのは次の問題です。
-
①人気の CSS3
<span style="font-size: 14px;">animate.css をスワイパーに追加する方法 # ＃＃＃＃＃＃＃＃アニメーション。 </span><span style="font-size: 14px;"></span>②カルーセル画像を追加した後にスライドさせた場合、次の画面のアニメーションが自動的に再生されないようにするにはどうすればよいですか。 - <span style="font-size: 14px;"></span>③カルーセル画像の無限ループ再生を実現する方法。
- #④それはどのように実現できますか? ユーザーがボタンをクリックすると、指定された
- swiper-item<span style="font-size: 14px;"></span># にジャンプできます。 ＃ ＃真ん中。つまり、指定した画面にジャンプします。
<span style="font-size: 14px;"></span>⑤アプレットと H5 バージョンのコードはヘッダーを生成します。H5 バージョンではナビゲーション バーを非表示にする必要があります。 <span style="font-size: 14px;"></span> - 以下は私の全体的な制作プロセスです。参考としてのみご利用ください。また、コードは<span style="font-size: 14px;">uni-app</span>で開発されているため、ミニプログラムやH5でのテストも問題ありません。さらに、 小プログラム
小プログラムのバージョン コードとuni-appのコードが参考として提供されます。 コードの実装
animate.css を使用し、アニメーション# で始まる多くの -webkit-css3 を削除しました。 ##。小さなプログラムと H5 でのみ実行する必要があるため、これによる影響はあまりありません。必要に応じて、以下のコードから取得できます。
まずコードを見てみましょう: <pre class="brush:php;toolbar:false"><template>
<view class="content">
<button type="primary" @tap="goChange">跳转到第二屏</button>
<swiper class="content-swiper" :vertical="true" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000" @change="changeSwiper" @animationfinish="changeFinish" :current-item-id="item_id" circular="true">
<swiper-item item-id="slide0">
<view class="swiper-item">
<image src="../../static/uni.png" :class="animate_0"></image>
</view>
</swiper-item>
<swiper-item item-id="slide1">
<view class="swiper-item">
<image src="../../static/uni.png" :class="animate_1"></image>
</view>
</swiper-item>
<swiper-item item-id="slide2">
<view class="swiper-item">
<image src="../../static/uni.png" :class="animate_2"></image>
</view>
</swiper-item>
<swiper-item item-id="slide3">
<view class="swiper-item">
<image src="../../static/uni.png" :class="animate_3"></image>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
item_id: 'slide2',
animate_0: 'animated swing',
animate_1: '',
animate_2: '',
animate_3: ''
}
},
onLoad() {
},
methods: {
changeSwiper(event){ // 清空除了当前swiper以外的所有动画
let current = event.detail.current; // 当前页下标
this.item_id = 'slide'+current; // 这里必须记录，否则只能跳转一次
switch (current){
case 0:
this['animate_1'] = this['animate_2'] = this['animate_3'] = '';
break;
case 1:
this['animate_0'] = this['animate_2'] = this['animate_3'] = '';
break;
case 2:
this['animate_0'] = this['animate_1'] = this['animate_3'] = '';
break;
case 3:
this['animate_0'] = this['animate_1'] = this['animate_2'] = '';
break;
}
},
changeFinish(event){ // swiper动画完成之后，给当前swiper添加动画效果
let current = event.detail.current;
switch(current){
case 0:
this['animate_0'] = 'animated swing';
break;
case 1:
this['animate_1'] = 'animated shake';
break;
case 2:
this['animate_2'] = 'animated tada';
break;
case 3:
this['animate_3'] = 'animated heartBeat';
break;
}
},
goChange(){
this.item_id = 'slide1';
}
}
}
</script>
<style lang="scss">
@import '../../common/animate.css';
.content {
text-align: center;
.content-swiper{
height: 100vh;
image{
height: 200upx;
width: 200upx;
margin-top: 200upx;
}
}
}
</style></pre>
<ul>
<li>
<span style="font-size: 14px;">まず第一に、</span><code><span style="font-size: 14px;">uni-app</span> は Sass をサポートしています。簡潔なバージョン <span style="font-size: 14px;">animate.css</span> は css に直接導入されます。 問題①
<span style="font-size: 14px;">circular</span>このパラメータは次のことがわかりました。 H5 ページでは、swiper.js<span style="font-size: 14px;">loop</span> パラメータの関数を使用しています。ここで、<span style="font-size: 14px;">uni-app</span> と <span style="font-size: 14px;"> WeChat アプレット</span> ドキュメントの説明に該当しました。ピット。 <span style="font-size: 14px;">loop</span>(ループ)というパラメータを探していたので、この無限ループ機能は実現できないのではないかとさえ思っていました。 <span style="font-size: 14px;"> アプレット </span># のこのパラメータは <span style="font-size: 14px;">circular</span> (circular ）。 o(╯□╰)o 質問③
# vertical<span style="font-size: 14px;"></span> は <span style="font-size: 14px;"></span>true<span style="font-size: 14px;"></span> に設定されます。 <span style="font-size: 14px;"></span>
uni-app<span style="font-size: 14px;"></span> で、<span style="font-size: 14px;"></span>change<span style="font-size: 14px;"> 経由 </span> イベントでは、カルーセル画面のすべての変化を監視できます。このイベントでは、現在の画面 <span style="font-size: 14px;"></span>current<span style="font-size: 14px;"></span> の添え字を記録しました。次に、現在の画面以外の画面ですべての css3 アニメーションをキャンセルします。最後に、animationfinish<span style="font-size: 14px;"></span> イベントで、<span style="font-size: 14px;"></span>swiper<span style="font-size: 14px;"></span> スライド アニメーションが終了すると、 give 現在の画面の要素に css3 アニメーションを追加します。 質問②
uni-app<span style="font-size: 14px;"></span> に ## があります。 #current-item-id<span style="font-size: 14px;"></span> パラメーターは、現在のスライダーの <span style="font-size: 14px;"></span>item-id<span style="font-size: 14px;"></span> を表します。この文書を読んで理解するまでに長い時間がかかりました。 #swiper-item<span style="font-size: 14px;"># を </span>#item-id<span style="font-size: 14px;"></span>## で指定する必要があることがわかりました。 ＃。次に、ユーザーがイベントをクリックしたときに、<span style="font-size: 14px;"></span>current-item-id<span style="font-size: 14px;"></span> にバインドされた値を変更するだけです。コードが初期化されると、<span style="font-size: 14px;"></span>item-id<span style="font-size: 14px;"></span> は <span style="font-size: 14px;"></span>slide2<span style="font-size: 14px;"></span> として指定されます。スクリーン。 質問④<span style="font-size: 14px;"></span>最後の質問は、
#pages.json<span style="font-size: 14px;"></span>#titleNView<span style="font-size: 14px;"></span> を <span style="font-size: 14px;"></span>false## に設定するだけです# で十分です。 <span style="font-size: 14px;"></span>WeChat ミニ プログラム コード<pre class="brush:php;toolbar:false"><!--index.wxml-->
<view class="container">
<button bindtap=&#39;goChange&#39;>跳转到</button>
<swiper vertical="true" circular="true" current="{{currentId}}" indicator-dots="true" bindchange="changeSwiper" bindanimationfinish="changeFinish">
<swiper-item>
<image src=&#39;../../static/uni.png&#39; class=&#39;animated {{animate_0}}&#39;></image>
</swiper-item>
<swiper-item>
<image src=&#39;../../static/uni.png&#39; class=&#39;animated {{animate_1}}&#39;></image>
</swiper-item>
<swiper-item>
<image src=&#39;../../static/uni.png&#39; class=&#39;animated {{animate_2}}&#39;></image>
</swiper-item>
</swiper>
</view>
//index.js
const app = getApp()
Page({
data: {
currentId: 0,
animate_0: 'swing',
animate_1: '',
animate_2: ''
},
onLoad: function() {
},
goChange: function() {
this.setData({
currentId: 2
});
},
changeSwiper: function(event) {
let current = event.detail.current;
switch (current) {
case 0:
this.setData({
animate_1: '',
animate_2: ''
});
break;
case 1:
this.setData({
animate_0: '',
animate_2: ''
});
break;
case 2:
this.setData({
animate_0: '',
animate_1: ''
});
break;
}
},
changeFinish: function(event) {
let current = event.detail.current;
switch (current) {
case 0:
this.setData({
animate_0: 'swing',
});
break;
case 1:
this.setData({
animate_1: 'shake',
});
break;
case 2:
this.setData({
animate_2: 'tada',
});
break;
}
}
})</pre>
<span style="font-size: 14px;">コードは Tencent Cloud Developer Platform にホストされています。必要に応じて参照できます。コード ディレクトリ </span>unpackage/dist/build/h5 には、生成された H5 バージョン ページがあります。 Web サーバーに展開する場合、ローカル ファイル プロトコルはサポートされないことに注意してください。 参照用に 2 つのバージョンのコードが生成されます。
」<span style="font-size: 14px;"></span>
以上がミニ プログラム スワイパー カルーセル CSS3 アニメーションと、指定されたスワイパー項目へのジャンプに使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。