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公式の属性説明を添付します↓

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