WeChat Xiaocheng スワイパーコンポーネントを使用した画像カルーセル切り替え機能の実装に関するチュートリアル-ミニプログラム開発-php.cn

WeChat Xiaocheng スワイパーコンポーネントを使用した画像カルーセル切り替え機能の実装に関するチュートリアル

小云云

リリース： 2017-12-13 09:35:13

オリジナル

3385 人が閲覧しました

この記事では主に、WeChat Xiaocheng が画像カルーセル切り替え表示機能を実装するためのスワイパーコンポーネントの使用方法を紹介し、スワイパーコンポーネントの関連属性の使用方法についても説明します。

1. エフェクト表示

2. キーコード

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>

ログイン後にコピー

swiコンポーネントごとのプロパティ手順は次のとおりです:

現在選択されているインジケーターポイントの色

属性名	タイプ	デフォルト値	説明	最小バージョン
indicator-dots	Boolean	false	パネルインジケータードットを表示するかどうか	#0 00000
1.1.0
autoplay	Boolean	false	自動的に切り替えるかどうか
current	Number	0	現在のページのインデックス
間隔	数値	5000	時間間隔を自動的に切り替える
継続時間	数値	500	スライドアニメーションの長さ
circular	Boolean	false	スライド方向が垂直かどうか

bindchange	EventHandle		現在の変更時にchangeイベントがトリガーされます。event.detail = {current:current,source:source}