スワイパーを使用して画像の回転効果を実現する WeChat アプレットを簡単に始めることができます

前回の記事では、コンテナコンポーネントビューで水平および垂直レイアウトを実現するためにミニプログラムの wxss を設定しました。この記事では、swiper タグを使用して画像の回転効果を実現します。


回転効果は、多くの Web サイトのホームページやモバイル アプリケーションで確認できます。WeChat アプレットのスワイパー コンポーネントを使用して、画像の回転を実現します。

デモの便宜のため。 , アニメートします 切り替え間隔は、プロジェクトの要件に応じて 3 秒に調整されますが、実際のプロジェクトでは通常 5 秒です。

画像の回転を実装するには、スワイパー スライダー ビュー コンテナ コンポーネントを使用します。ページ構造ファイルのコードは次のとおりです。

<!--mySwiper.wxml-->  
<view class="container">  
    <swiper indicator-dots="{{indicatorDots}}"  
    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">  
        <block wx:for="{{imgUrls}}">  
            <swiper-item>  
               <image src="{{item}}" class="slide-image" width="355" height="150"/>  
            </swiper-item>  
        </block>  
    </swiper>  
</view>

最も外側の親コンテナ ビューとコンポーネントの属性を無視すると、ページ ファイル構造は次のように簡略化されます。上記のコードからわかるように、画像の回転コード全体はスワイパー コンポーネントによって形成されます。スワイパー コンポーネントには複数のスワイパー アイテム コンポーネントが含まれており、その中に画像がスワイパー アイテムに配置されます。

の機能は、imgUrls 配列にバインディングする属性を制御し、配列内の各項目のデータを使用してコンポーネントを繰り返しレンダリングすることです。ブロック タグはページ上に表示されません。詳しく知りたい場合は、公式ドキュメントを参照してください:

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/ list.html ブロッ​​ク wx:for について詳しくは、t=201715 をご覧ください。

コード内にある {{}} 記号は Mustache 構文であり、二重中括弧で囲まれた変数名からデータを取り出して、データ バインディングを実装することを意味します。これらの変数は同じ .js ファイル内にあります。オブジェクト内で次のように宣言されます:

indicator-dots: パネルインジケーターポイントを表示するかどうか、デフォルトは false;

autoplay: 自動的に切り替えるかどうか、デフォルトは false;

interval: 自動切り替え時間間隔、デフォルトは 5000ms;

duration: スライド アニメーションの継続時間、デフォルトは 1000ms;

スワイパー コンポーネントには幅を与える必要があることに注意してください。それ以外の場合は、スワイパーここでは、特定の幅と高さが指定され、中央表示が設定されます:

<swiper>  
        <block wx:for="{{imgUrls}}">  
            <swiper-item>  
                <image/>  
            </swiper-item>  
        </block>  
</swiper>

スワイパー属性の詳細な説明は次のとおりです:

その他の WeChat ミニ プログラムについては、スワイパーを使用して画像の回転効果を実現するのは簡単です。関連記事については、PHP 中国語 Web サイトに注目してください。