より良い-スクロールの原理
1.より良い-スクロールとは何ですか？
より良い-スクロールリストを通常のスクロール操作を行うだけでなく、可動スクロールエンド・ソリューションである、あなたはまたようにカルーセルマップ、ピッカー、および操作を行うことができます。
のスクロール2.betterスクロール原則？
ブラウザのスクロール原則を初めて目、ページコンテンツの高さは、垂直スクロールバーがあるだろう、ビューポートの高さを超えて、あなたが遭遇する、ブラウザのスクロールバー、ページコンテンツの幅が時にビューポートの幅を超えて、水平スクロールバーが表示されます。我々は、ユーザーがスクロールバーへの道の残りの部分を見るために画面の内容をスクロールすることができますビューポートの表示内容に劣らない場合には、あります。同じ理由であるので、より良い-スクロールのために、我々は最初のより良いスクロール共通HTML構造を見てみましょう。
より直感的にするために、我々は、マップを見ていきます。
親コンテナであるラッパーの緑色部分は、それが一定の高さを有することになります。その高さで、親コンテナの最初の子であるコンテンツの黄色の部分は、コンテンツ高いままのサイズになります。その後、時にコンテンツの高さは、親コンテナの高さは、圧延されていない超えていないが、それは親コンテナの高さを超えると、我々はコンテンツエリアをスクロールすることができ、より良い-スクロールスクロールの原理です。
以下のように、どのように我々はそれがHTML構造の上にある場合は、それをより良いスクロール初期化を行う、初期化コードは次のようになります。
'より良いスクロール'からインポートBScroll せラッパー = document.querySelector（ 'ラッパー' ） させ、スクロール = 新しい BScroll（ラッパー、{}）
外国人がクラスBScrollを公開良く、スクロール、我々は唯一の可能クラスの新しいインスタンスを初期化する必要があります。最初のパラメータは、第二には、いくつかの設定パラメータで、私たちのラッパーDOMオブジェクトであるに特に関連して、 より良い-スクロール文書。
それが初期化されるとき、それは垂直方向と水平方向のスクロールかどうかを判断するために、親要素と子要素の高さと幅を計算しますので、初期化、より良い-スクロールタイミングは、非常に重要です。したがって、我々はそれを初期化し、私たちは親と子要素の内容が正しくレンダリングされていることを確認する必要があります。親要素またはDOM構造の変化の要素は、私たちは思い出す必要がある子ならば scroll.refresh() 再計算は、通常のローリング効果ことを確認します。だから、より良い-スクロールは、学生にフィードバックを初期化する機会をスクロールすることができない理由は、主に、より良い-スクロール間違っている、またはDOM構造の変化は、より良い-スクロールを再計算していないときに送信されます。
Vueの中で、より良い-スクロールを使用する方法
Vue.js取得は、DOMオブジェクトのインターフェイスを提供してくれます- vm.$refs。ここでは、採用 this.$refs.wrapper 、このDOMオブジェクトへの訪問を、私たちは、フック関数の内部に実装this.$nextTick ベター初期化スクロールコールバック関数の。この時間は、DOMのラッパーがレンダリングされているので、我々は、その内のコンテンツの高さを計算することができ、それが通常のスクロールを確保するために、正しいです。
非同期データ処理
私たちの実際には、データのリストは、多くの場合、非同期に取得されるので、以下のように、我々は、データ収集後に、より良い-スクロールを初期化するために必要な時間は、コードは次のとおりです。
-------------------------------------------------- -------------------------------------------------
次のようにネットワーク障害が良く、スクロールプロセスの原因となるプロジェクトを実行する前に次のとおりです。
次のように具体的な実施プロセスは、その後、あなたが適切にスクロールすることができ、あなたは明らかに、上記のコードなし親ボックスを見ることができるので、私は親ボックスを追加するだけでなく、親ボックスの固定高さに：
