better-scrollプラグインのスライドできないバグについて（2021年プラグインで解決）

より良いスクロールの原則

親コンテナーであるため、ラッパーの高さはコンテンツのサイズに応じて増加します。そして、
コンテンツの高さが親コンテナの高さを超えていない場合は、スクロールできません。親コンテナの高さを超えると、コンテンツ領域をスクロールできるようになります。
BetterScrollはデフォルトでコンテナ（ラッパー）の最初の子要素（コンテンツ）のスクロールを処理し、他の要素は無視されるため、次のページ構造も与えられます。

<div class="wrapper">
 <ul class="content">
  <li>...</li>
  <li>...</li>
  ...
 </ul>
 <!-- ここに他の DOM を置くこともできますが、スクロールには影響しません -->
</div>

ですので、ここでは最も重要な点についてのみお話します。 ！ ！

圖片需要加載ため、better-scroll の初期化のタイミングは非常に重要です。初期化時に、親要素と子要素の高さと幅が計算されるからです。画像がまだ読み込まれていない状態で初期化すると、実際に計算された高さと実際の高さに大きな差が生じます (ネットワーク速度も影響します...)

これが、すべてのユーザーがスクロールできない最大の理由です。

数日前にこの問題に遭遇し、better-scroll ドキュメントにアクセスできなくなりました。github のドキュメントは、大まかにしか使えませんでした。解決策を探すのに丸一日かかりました。インターネット上にはさまざまな方法が出てきました。最適な解決策は次のとおりです。

プラグイン経由: better-scroll/observe-dom

BetterScroll は、スクロール可能な高さまたは幅を動的に計算します。高さまたは幅が変更されたときに、refresh() メソッドを手動で呼び出す必要はありません。プラグインは MutationObserver を介してこれを実行します。

現在のブラウザが MutationObserver をサポートしていない場合は、setTimeout を使用するようにダウングレードされます。

使用

依存関係をインストールする npm install @better-scroll/observe-dom

'@better-scroll/core' から BScroll をインポートします。
'@better-scroll/observe-dom' から ObserveDom をインポートします。
BScroll.use(ObserveDom)

const bs = 新しいBScroll('.wrapper', {
 DOMを観察: 真
})

この問題には多くの解決策がありますが、インターネット上の多くの記事では明確に説明されていません。このプラグインを使用してください。

別の解決策としては、画像の読み込みを監視し、refresh()を呼び出して高さを再計算することです。

Vueはimgタグを使用し、 @load="定義一個方法"を使用して画像読み込みイベントを監視します。画像が読み込まれている限り、定義したメソッドが1回呼び出されます。

最後に、メソッド内に this.scroll.refresh() を記述して、画像を読み込み、一度更新して高さを再計算します。同時に、頻繁な繰り返し呼び出しによって発生するさまざまな問題を回避するために、手ぶれ補正機能を使用する必要があります。

以上でbetter-scrollプラグインのスライド不可についての記事は終了です（2021年にプラグインで解決）。better-scrollプラグインのスライド不可に関する関連コンテンツは、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします！