WeChat ミニプログラムでスワイパーコンポーネントを使用して画像表示を切り替える方法-jsチュートリアル-php.cn

WeChat ミニプログラムでスワイパーコンポーネントを使用して画像表示を切り替える方法

亚连

リリース： 2018-06-21 11:57:40

オリジナル

2115 人が閲覧しました

この記事は主に、WeChat Xiaocheng が画像カルーセル切り替え表示機能を実装するためのスワイパーコンポーネントの使用法を紹介し、スワイパーコンポーネントの関連属性を使用するスキルを含みます。また、読者がダウンロードして参照できるソースコードも付属しています。必要な場合は参照してください

この記事の例では、WeChat Xiaocheng がスワイパーコンポーネントを使用して画像カルーセル切り替え表示機能を実装するストーリーを説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

キーコード

index.wxml:

<swiper indicator-dots="true"autoplay="true" interval="3000" duration="600" style="height:300px;">
 <swiper-item>
 <image src="../../pages/images/img1.png" style="display: block;height: 300px;"/>
 </swiper-item>
 <swiper-item>
 <image src="../../pages/images/img2.png" style="display: block;height: 300px;"/>
 </swiper-item>
 <swiper-item>
 <image src="../../pages/images/img3.png" style="display: block;height: 300px;"/>
 </swiper-item>
</swiper>

ログイン後にコピー

swiperコンポーネントの属性の説明は次のとおりです:

currentchange,event.detail={Current:Current,Source:Source:Source:Source:source:source :source:source }ES6/JavaScriptの使用スキルについて(詳細チュートリアル)

属性名	タイプ	デフォルト値	説明	最小バージョン
indicator-dots	Boolean	false	パネルインジケータードットを表示するかどうか
indicator-color	Color	rgba(0, 0, 0, .3)	インジケーターの色	1.1.0
indicator-active-color	Color	#000000	現在選択されているインジケーターポイントの色	1.1.0
autoplay	Boolean	false	自動的に切り替わるかどうか
current	Number	0	現在のページのインデックス
interval	Number	5000	時間間隔を自動的に切り替える
duration	Number	500	スライドアニメーションの継続時間
circular	Boolean	false	接続されたスライドを使用するかどうか
OrTiCaltBoolean	false	のスライド方向のOlの方向は縦方向の変化	eventhandle
			以上は皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。	関連記事: