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

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


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

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

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

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

の機能は、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;

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

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

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