blog

バントリストコンポーネント

1 の場合、List はブラウザのスクロール イベントをリッスンして、リストの位置を計算します。スクロールするリストに css スタイルでパディングとマージンが追加されている場合は、オフセットを計算す...

Jan 12, 2021 · 3 min. read

バントリストコンポーネント

1, Listはブラウザのスクロールイベントを聞き、リストの位置を計算します。リストの一番下から可視領域までの距離がoffsetより小さい場合、Listはロードイベントをトリガーします。offsetはプロパティで動的に設定できます。スクロールリストに css スタイルでパディングとマージンが設定されている場合は、オフセットを計算するときに追加する必要があります。

2、プルアップが2ページ目をロードした場合は、スクロールバーの位置を0に設定するには、データの新しい最初のページを再要求し、それ以外の場合は、2つのページを要求する場合があります。というのも、上記の最初のポイントで述べたように、「List はブラウザのスクロールイベントをリッスンしてリストの位置を計算し、リストの一番下から可視領域までの距離がオフセットよりも小さい場合、List はロードイベントをトリガーする」からです。ここでスクロールバーの位置を設定するために、refs.vanlist.scroller.scrollTop=0を使っています;

3、プルアップがこれ以上のデータにロードされた場合は、trueに終了を設定する必要があります。新しいデータの要求がある場合は、falseに終了と言う必要があります、そうでなければ、プルダウンまたはプルアップ操作ができなくなります。

リストの公式サイト

1、リストが初期化された直後にloadイベントが発生するのはなぜですか?ロードイベントはリストが初期化された後、最初の画面のデータをロードするために一度だけトリガーされます。

2、なぜロードイベントが連続して発生するのですか?一回のリクエストでロードされるデータアイテムの数が少なく、リストのコンテンツが現在のスクリーンを満たすことができない場合、コンテンツがスクリーンを満たすか、すべてのデータがロードされるまで、リストはロードイベントをトリガーし続けます。そのため、各リクエストのデータ項目数を調整する必要があります。理想的には、各リクエストのデータ項目数は1画面の高さを満たすことができる必要があります。

3、loadingとfinishedの意味はそれぞれ何ですか?Listには以下の3つの状態があります。これらの状態を理解することで、Listコンポーネントを正しく使うことができます:

  •  リストの下端と可視領域の間の距離がoffsetより小さい場合、Listはloadイベントをトリガーする。 リストがロードされていない場合、loadはfalseとなり、リストの位置に応じてスクロールされる。
    
  •  リストの下端と可視領域の間の距離がoffsetより小さいとき、Listはloadイベントをトリガーする。 loadingのとき、loadingがtrueであれば、非同期リクエストが送信されていることを意味する。
    
  •  読み込みが終了すると、finishedがtrueになり、この時点ではloadイベントは発生しない。
    

各リクエストの後、ローディングの終了を示すために、手動でローディングをfalseに設定する必要があります。

4、フロートレイアウトを使用した後にロードをトリガーするには?リストのコンテンツがfloatレイアウトを使用している場合、コンテナにvan-clearfixクラス名を追加してfloatをクリアすることで、リストが要素の位置を正しく判断できるようになります。

5、htmlとbodyにoverflowを設定した後、どのように読み込みをトリガーしますか?htmlタグやbodyタグにoverflow-x: hiddenを設定すると、Listの読み込みがトリガーされ続けます。html, body { overflow-x: hidden; } この問題の原因は、要素に overflow-x: hidden スタイルが設定されると、ブラウザによって要素の overflow-y がデフォルト値の visible ではなく auto に設定され、リストがスクロール コンテナを正しく判断できなくなるためです。解決策は、このスタイルを削除するか、html タグと body タグに height: 100% スタイルを追加することです。

6、リストの操作メカニズムは何ですか?Listはブラウザのスクロールイベントを聞いて、リストの位置を計算し、リストの底と可視領域の間の距離がオフセットより小さい場合、Listはロードイベントをトリガーします。

Read next

誰が米ドルのデジタル化を推進しているのか?

これは複雑すぎる問題です。米ドルは国際通貨であり、米ドルのデジタル化を推し進めるのは、米国内外から、規制当局や規制対象機関から、金融機関や非金融機関からかもしれません。鍵は2つあります。

Jan 12, 2021 · 2 min read

JavaScriptの概要

Jan 11, 2021 · 2 min read

[MyBatis]条件アノテーション

Jan 11, 2021 · 2 min read

FlutterのThemeData

Jan 8, 2021 · 4 min read