03 - WeChat アプレットの共通コンポーネント - コンテナ コンポーネントの表示

WeChat アプレット コンポーネント - ビュー コンテナー

WeChat アプレットは 、 ビュー コンテナ 、 基本コンテンツ 、 ナビゲーション 、 フォーム 、 インタラクション 、および ナビゲーション の 6 つの主要コンポーネントで構成されます。これらのコンポーネントは、WXML および WXSS を通じてレイアウトおよびスタイル設定できるため、豊富なアプレット インターフェイスとインタラクティブなエクスペリエンスを構築できます。

• このうち、ビュー コンテナ コンポーネントには、ページの構造とスクロール効果を実現するために使用されるビューやスクロール ビューなどが含まれます。
• 基本的なコンテンツ コンポーネントには、テキストや画像のコンテンツを表示するために使用されるテキストや画像などが含まれます。
• フォームコンポーネントには、ユーザーの入力と選択のためのボタン、入力、チェックボックスなどが含まれます。
• インタラクティブコンポーネントには、ユーザー間の対話や操作を実現するためのコンタクトやアクションシートなどが含まれます。

ビューコンテナ。HTML の div に相当します。

WeChat ミニ プログラム公式ドキュメント - コンポーネント

ビューコンテナ

WeChat アプレット ビュー コンテナ コンポーネントには、ページの構造とスクロール効果を実現するために使用されるビューやスクロール ビューなどが含まれます。

• 属性

名前	関数
表紙画像	ネイティブコンポーネントの上にオーバーレイされたイメージビュー
カバービュー	ネイティブコンポーネントの上にオーバーレイされたテキストビュー
グリッドビュー	Skyline の下のグリッド レイアウト コンテナー
リストビュー	リスト レイアウト コンテナ。scroll-viewカスタム モードの直接の子ノードまたはスティッキー セクションコンポーネントの直接の子ノードとしてのみサポートされます。
マッチメディア	メディアクエリ一致検出ノード
可動領域	ムーバブルビューの可動領域
可動ビュー	移動可能なビュー コンテナ。ページ上でドラッグしてスライドできます。
ページコンテナ	ページコンテナ
ルートポータル	CSS で固定位置を使用する効果と同様に、ページからサブツリー全体を作成します。
スクロールビュー	スクロール可能なビューエリア
共有要素	共有要素
スティッキーヘッダー	天井レイアウト コンテナ。scroll-viewカスタム モードの直接の子ノードまたはスティッキー セクションコンポーネントの直接の子ノードとしてのみサポートされます。
粘着セクション	天井レイアウト コンテナ。scroll-viewカスタム モードの直接の子ノードとしてのみサポートされます。
スワイプ	スライダービューコンテナ
スワイパーアイテム	スワイパーコンポーネント内にのみ配置でき、幅と高さは自動的に 100% に設定されます。
ビュー	ビューコンテナ

ビュービューコンテナ

プロパティの説明

属性	タイプ	デフォルト	必須	説明する	最小バージョン
ホバークラス	弦	なし	いいえ	押されたスタイルのクラスを指定します。hover-class="none"現時点では、クリック状態の効果はありません	1.0.0
ホバーストップ伝播	ブール値	間違い	いいえ	このノードの祖先ノードがクリック状態で表示されないようにするかどうかを指定します	1.5.0
ホバー開始時間	番号	50	いいえ	長押ししてからクリック状態が現れるまでの時間 (ミリ秒単位)	1.0.0
ホバー滞在時間	番号	400	いいえ	指を離した後のクリック状態の保持時間 (ミリ秒単位)	1.0.0

バグとヒント

1. tip: スクロールビューを使用する必要がある場合は、scroll-viewを使用してください。

ケースコード

前の章で新しく作成したページをサンプルコードに置き換えます。

<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view class="flex-wrp" style="flex-direction:row;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>
<view class="section">
  <view class="section__title">flex-direction: column</view>
  <view class="flex-wrp" style="height: 300px;flex-direction:column;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

公式サイトではスタイルコードの説明がありませんが、以下のコードを.wxss対応するサイトに貼り付けます。

• スタイル

/* pages/demo/index.wxss */
.page-section{
    
    
margin-bottom: 20rpx;
}
.flex-wrp {
    
    display: flex;}
.bc_green {
    
    background: green;width:100px; height: 100px;}
.bc_red {
    
    background: red;width:100px; height: 100px;}
.bc_blue {
    
    background: blue;width:100px; height: 100px;}

• レンダリング

スワイパー スライダー ビュー コンテナー

機能説明

スライダービューコンテナー。配置できるのはswiper-itemコンポーネントのみです。配置しないと、未定義の動作が発生します。

プロパティの説明

Skyline は WebView プロパティとの相違点のみをリストします。リストされていないプロパティは WebView と一致します。

属性	タイプ	デフォルト	必須	説明する	最小バージョン
	インジケータードット	ブール値	間違い	いいえ	パネルインジケーターポイントを表示するかどうか	1.0.0
	インジケーターの色	色	rgba(0, 0, 0, .3)	いいえ	キューポイントの色	1.1.0
	インジケーターアクティブカラー	色	#000000	いいえ	現在選択されているキューポイントの色	1.1.0
	自動再生	ブール値	間違い	いいえ	自動で切り替えるかどうか	1.0.0
	現在	番号	0	いいえ	現在のスライダーのインデックス	1.0.0
	間隔	番号	5000	いいえ	自動切り替え時間間隔	1.0.0
	間隔	番号	500	いいえ	スワイプアニメーションの長さ	1.0.0
	円形	ブール値	間違い	いいえ	ジョイントスライディングを使用するかどうか	1.0.0
	垂直	ブール値	間違い	いいえ	スライド方向が垂直かどうか	1.0.0
	前のマージン	弦	「0ピクセル」	いいえ	前マージン。前のアイテムの一部を露出させるために使用できます。px および rpx 値を受け入れます。	1.9.0
	次のマージン	弦	「0ピクセル」	いいえ	バックマージン。背面アイテムの一部を露出するために使用できます。px および rpx 値を受け入れます。	1.9.0
	エッジにスナップ	ブール値	間違い	いいえ	swiper-item の数が 2 以上の場合、circular がオフで、previous-margin または next-margin がオンの場合、このマージンを最初と最後の要素に適用するかどうかを指定できます。	2.12.1
	複数の項目を表示	番号	1	いいえ	同時に表示されるスライダーの数	1.9.0
	イージング関数	弦	"デフォルト"	いいえ	イージングアニメーションタイプを切り替えるスワイパーを指定します	2.6.5
	有効な値の説明 デフォルト デフォルト イージング関数 リニア リニア アニメーションeaseInCubic イーズイン アニメーションeaseOutCubic イーズアウト アニメーションeaseInOutCubic イーズインおよびイーズアウト アニメーション
	バインドチェンジ	イベントハンドル		いいえ	現在の変更時に変更イベントがトリガーされます。event.detail = {current,source}	1.0.0
	バインド遷移	イベントハンドル		いいえ	スワイパーアイテムの位置が変化すると、遷移イベントがトリガーされます。event.detail = {dx: dx, dy: dy}	2.4.3
	バインドアニメーション仕上げ	イベントハンドル		いいえ	アニメーションが終了すると、animationfinish イベントがトリガーされます。event.detail は上記と同じです。	1.9.0

changeイベントsourceの戻り値

1.4.0以降、変更の原因を示すchangeイベントフィールドが追加され、指定できる値は次のとおりです。source

1. autoplay自動再生によりスワイパーが変化します。
2. touchユーザーがスワイプすると、スワイパーが変化します。
3. 他の理由は空の文字列で表されます。

バグとヒント

1. tip:のbindchangeイベントコールバック関数の値をsetData変更すると、連続して呼び出されるcurrent可能性があるため、通常は値を変更する前にフィールドを確認して、ユーザーのタッチが原因であるかどうかを判断してください。setDatacurrentsource
2. tip: Mac アプレット上で、enablePassiveEvent現在のコンポーネントが配置されているページまたはグローバルで設定項目が有効になっている場合、組み込みコンポーネントが予期しない動作をする可能性があります (詳細については、enablePassiveEvent ドキュメントを参照してください)。

ケースコード

wxml

<swiper indicator-dots="true" autoplay="true" interval="3000" duration="500">
  <swiper-item>
    <image src="../image/202306001.png" width="375" height="170" />
  </swiper-item>
  <swiper-item>
    <image src="../image/202306002.png" width="375" height="170" />
  </swiper-item>
</swiper>

• レンダリング

インジケーターの色

属性に応じてindicator-colorインジケーターポイントの色を設定します

<swiper indicator-dots="true" autoplay="true" indicator-color="#80ff80" interval="3000" duration="500">
  <swiper-item>
    <image src="../image/202306001.png" width="375" height="170" />
  </swiper-item>
  <swiper-item>
    <image src="../image/202306002.png" width="375" height="170" />
  </swiper-item>
</swiper>

• レンダリング

次の章 WeChat Mini プログラムの共通コンポーネント - 基本コンポーネント