vue better-scroll 用スクロールプラグインの使い方の詳細説明

今回は、vue better-scroll スクロール プラグインの使用方法について詳しく説明します。vue better-scroll スクロール プラグインを使用する際の 注意事項 について、実際の事例を見てみましょう。 。

BetterScroll は現在最高のモバイル スクロール プラグインとして知られており、その威力は間違いなくあります。そうでなければ…ははは。個人的にはとても便利だと感じています。この記事は BetterScroll 全般に関するものではなく、スクロールについて詳しく知りたい場合は、こちらを参照してください。

ローリング原理

スクロールとは何かスクロールの原則

better-scroll は、モバイル端末でのさまざまなスクロール シナリオのニーズを解決することに焦点を当てたプラグインです (PC はすでにサポートされています)。そのコアは iscroll の実装に基づいており、その API 設計は基本的に iscroll と互換性があり、いくつかの機能が拡張され、いくつかの

パフォーマンスの最適化が行われています。

better-scroll はネイティブ JS に基づいて実装されており、フレームワークには依存しません。コンパイルされたコード サイズは 63 kb、圧縮後は 35 kb、gzip 後はわずか 9 kb で、非常に軽量な JS ライブラリです。

緑色の部分は親コンテナーであるラッパーで、高さは固定されています。黄色の部分は、 content (親コンテナの最初の子要素) の高さは、コンテンツのサイズに応じて増加します。そして、コンテンツが完成したら、 高さは親コンテナの高さを超えず、親コンテナの高さを超えると、コンテンツ領域をスクロールできます。水平スクロールの原理は、固定高さを固定幅に変更することです。 (ここではあまり詳しく説明しません)

縦にスクロール

早速、コードに進みましょう。

りー

これは Vue BetterScroll の垂直スクロールのデモです。ここで注意すべき点が 2 つあります。

1. 親 p のレイヤーはコンテナーである 1 つだけ存在できます

親 p はオーバーフローおよび非表示に設定され、高さが固定されている必要があります

横スクロール

水平スクロールは垂直スクロールと比較して、スクロール領域の幅を動的に取得し、コードを直接入力する必要があります。

りー

横スクロールには注意が必要です。

1. 親 p のレイヤーは 1 つだけあり、それがコンテナーです

親コンテナーはオーバーフローの非表示と固定幅を設定する必要があります
スクロール領域の幅を動的に取得します

この記事の事例を読んだ後の方法など、とても興味深いですね。php 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

vue での完全選択と逆選択

mint-ui 時間プラグインを使用するときに選択値を取得する方法

以上がvue better-scroll 用スクロールプラグインの使い方の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。