ウィジェットswiperマルチキャストCSS 3アニメーションおよび指定swiper-item実現構想へのジャンプ

本人微信公衆番号:
先端修練の道、注目を歓迎します.
解決すべき問題
ここ数日、微信のウィジェットをどのように作るかを見ているswiperの輪播図です.ウィジェットのコードを生成する必要もあるし、H 5版のコードを生成する必要もあるので、2つのセットを書くと効率が悪いのでuni-appを選びました.uni-appは、基本コンポーネントswiperで直接マルチキャストアニメーションをサポートしている.
私が主に解決しなければならないのは以下のいくつかの問題です.

①css 3で流行しているanimate.cssアニメーションをswiperにどのように追加しますか.

②追加後、輪番図をスライドさせた場合、次の画面のアニメーションが自動的に再生されないことを保証するにはどうすればいいですか.

③どのようにしてマルチキャストマップの無限ループ再生を実現するか.

④どのように実現するかは、ユーザがボタンをクリックした後、指定されたswiper-itemにジャンプすることができる.つまり、指定した画面にジャンプします.

⑤ウィジェットとH 5版のコードはヘッダを生成し、H 5版ではナビゲーションバーを隠す必要があります.

以下は私の制作全体の構想過程で、参考に供します.また,コードはuni-app開発であるため,小プログラム中でもH 5中でもテストは問題ない.また、 の開発者の理解を容易にするために、 版コードとuni-appコードを提供して参考にします.
コード実装
H 5開発でよく使われるのがanimate.css.微信では当然サポートされていますが、微信はアップロードされる小さなプログラムにサイズ制限があるので、ここでは極めて簡略化されたanimate.cssを使用して、-webkit-animationの冒頭のcss 3を多く削除しました.ウィジェットやH 5で実行するだけなので、影響も大きくありません.必要であれば、次のコードから取得できます.
まずコードを見てみましょう.

    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';
            }
        }
    }

は、まずuni-appがsassをサポートする.cssには簡潔版animate.cssが直接導入されている.問題①

以降、文書を見ることにより、circularというパラメータは、H 5ページのようなswiperの使用を実現することができる.js loopパラメータの機能.ここではuni-appと のドキュメントで説明されているピットに落ちました.loop(ループ)というパラメータを探していたので、この無限ループの機能は実現できないと思っていました.もともと のこのパラメータをcircular(円形)と呼んでいました.o(′□╰)o問題③

ここでは縦スクリーンのスライド効果を実現するため、パラメータverticalをtrueに設定します.

uni-appでは、changeイベントによって、各マルチキャストスクリーンの変更を監視することができる.このイベントでは、現在の画面の下付きcurrentを記録します.次に、現在の画面以外のcss 3アニメーションをすべてキャンセルします.最後に、animationfinishイベントでは、swiperスライドアニメーションが終了すると、現在のスクリーンの要素にcss 3アニメーションを追加します.問題②

uni-appには、現在存在するスライダのcurrent-item-idを表すitem-idパラメータがあります.この文書は長い間読んでからやっと分かった.swiper-itemにitem-idを指定する必要があったのです.そして、ユーザがイベントトリガをクリックすると、current-item-idにバインドされた値を変更すればよい.私のコードは初期化時にitem-idがslide2という画面に指定されました.問題④

最後の質問時uni-appにH 5ナビゲーションバーが隠されています.pages.jsonにtitleNViewをfalseとすればよい.

ウィーチャットウィジェットコード

       
    
        
            
        
        
            
        
        
            
        
    

//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;
        }
    }
})

私はテンセントクラウド開発者プラットフォームにコードを管理しました.必要なら参考にしてください.コードディレクトリunpackage/dist/build/h5では、生成されたH 5版ページである.Webサーバに配備して使用するには、ローカルfileプロトコルのオープンはサポートされていません.このうち2つのバージョンのコードが生成されており、参考にしてください.