今回は、Vue でモバイル スクロールを実装する方法を説明します。Vue でモバイル スクロールを実装する際の 注意点とは何ですか。実際のケースを見てみましょう。
1. まず、installinstall
npm install better-scroll --save
import BScroll from ‘better-scroll'
3. このメソッドは better-scroll のインスタンス化であり、このメソッドはメソッドで使用されます。将来のページ DOM 構造。
methods: { _initScroll(){ this.menuScroll = new BScroll(this.$refs.menuWrapper, {}) this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {}) } } }
4. created() メソッドで、バックグラウンド データが正常に取得された後のコールバックで、
Vueを呼び出します。データを非同期で取得するため、データの読み込みが完了するまでは、Bscroll は対象コンテンツの高さを取得できず、スクロールできない現象が発生します。ここで注意が必要なのは、データが正常に取得された後は、直接 Dom が実行されることです。データ取得後のレンダリングではないため、nextTick() メソッドを使用する必要があります。this.nextTick のコールバックで _initScroll() を使用してください。
したがって、プロジェクトでは次のように記述する必要があります:
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php の他の関連記事に注目してください。中国語のサイトです!
推奨読書:
Web サイド アプリケーションはバック フォース リフレッシュを実装します JsChart コンポーネントの使用法の詳細な説明以上がVueでモバイル側のスクロールを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。