WeChat アプレットのスクロールビュー コンポーネントの詳細な説明

この記事は主に、WeChat アプレット コンポーネントのスクロール ビューの詳細な説明に関する関連情報を紹介します。この記事が、この部分の内容を理解して習得するのに役立つことを願っています。みんな。

WeChat アプレットコンポーネントである srcoll-view の詳細な説明

今日は、他の生徒に役立つことを願って、スクロールビュー学習で遭遇した問題と解決策を記録します。

まず達成したい効果を示してください。 ↓ 垂直スクロールは上下スクロールを実現し、水平スクロールは左右スクロールを実現します。

最初にwxmlコードを添付してください。

<view class="container"> 
 <view> 
  <text>vertical scroll</text> 
  <scroll-view scroll-y class="scroll-view-y" scroll-top="{{scrollTop}}"> 
   <view id="green" class="scroll-y-item bg_green"></view> 
   <view id="red" class="scroll-y-item bg_red"></view> 
   <view id="blue" class="scroll-y-item bg_blue"></view> 
   <view id="yellow" class="scroll-y-item bg_yellow"></view> 
  </scroll-view> 
 </view> 
 
 <view> 
  <text>horizontal scroll</text> 
  <scroll-view scroll-x class="scroll-view-x" style="width:100%"> 
   <view class="scroll-view-x"> 
    <view class="scroll-x-item bg_green"></view> 
    <view class="scroll-x-item bg_red"></view> 
    <view class="scroll-x-item bg_blue"></view> 
    <view class="scroll-x-item bg_yellow"></view> 
   </view> 
  </scroll-view> 
 </view> 
</view>

1. このビューのクラスは、必要に応じて調整できます。その後、2 つのビューはそれぞれ、スクロールビューとその上のテキストをラップします。

2. 最初のスクロールビューは垂直にスクロールする必要があり、scroll-y="{{true}}" を設定します (または、scroll-y を直接書き込みます)。このスクロールビューのクラスは「scroll-view-y」で、コードは後ほど添付します。 roll-top 属性はスクロール バーの初期位置を設定し、scrollTop は js ファイルのデータ内で宣言されます (不要な場合は削除できます)。

3. 色を使用しないスクロールビューの 4 つのビューは、色を除いて同じ属性を持ちます。

は垂直スクロールビュー

.scroll-view-y { 
 height: 200px; 
 width: 100%; 
} 
 
.scroll-y-item { 
 height: 70px; 
 width: 100%; 
}

4のwxssコードです。水平スクロールビューは基本的に垂直スクロールビューと似ていますが、違いに注目してみましょう。

(1) 垂直方向のスクロールビューは、異なる色の 4 つのビューを直接ラップします。水平方向では、各カラー ブロックを最初にビューでラップする必要があります。これは、カラー ブロックが水平に配置されるようにするためです。

(2) wxssファイル

は水平スクロールビューのwxssコード、scroll-view-xは水平スライダーの属性、scroll-x-itemは水平スライダーの各カラーブロックの属性です。

.scroll-view-x { 
 width: 300px; 
 height: 100px; 
 display: flex; 
 overflow: scroll; 
} 
 
.scroll-x-item { 
 width: 95px; 
 height: 100%; 
 display: inline-table; 
}

次のことがわかります:

①水平スライダーには、さらに 2 つの属性 (表示とオーバーフロー) があります。表示はフレックスに設定され、オーバーフローは子レイアウトが親コンテナを超えたときにスクロールするように設定されています。

②カラーブロックの表示属性はinline-tableに設定されています、これは非常に重要です！ ！ ！最初にこの属性を書かなかったため、長い間スクロールビューの横スライドを実現できませんでした。絶え間ない試みの末、ついに試してみました。とても満足しています!舌を出してください

WeChat公式の属性説明を添付します↓

scroll-y下限閾値scroll-topscroll-leftscroll-into-viewscroll-with-animationenable-back-to- topbindscrolltoupperbindscrollto lowerbindscroll

属性名	タイプ	デフォルト値	説明
scroll-x	ブール	false	水平方向を許可scrolling
boolean	false	allow垂直スクロールイベント
数値	50	scrollto lowerイベント
数値		垂直スクロールを設定するバーの位置
Number		水平スクロールバーの位置を設定します
String		値は特定のサブ要素IDである必要があります( ID を数字で始めることはできません)。スクロール可能な方向を設定し、その方向の要素までスクロールします
Boolean	false	スクロールバーの位置を設定するときにアニメーショントランジションを使用します
Boolean	false	iOSでは上部のステータスバーをクリックし、Androidではタイトルバーをダブルクリックすると、スクロールバーは垂直方向の
EventHandle		Scrollのみをサポートします。上/左に移動すると、scrolltoupper イベント
EventHandle		が下/右にスクロールし、scrollto lower イベント
EventHandle	がトリガーされます	は次の場合にトリガーされますスクロール Trigger,event.detail = {scrollLeft,scrollTop,scrollHeight ,scrollWidth,deltascroll-view のスクロール バーを非表示にする方法の紹介

以上がWeChat アプレットのスクロールビュー コンポーネントの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。