Vueでモバイル側のスクロールを実装する方法

今回は、Vue でモバイル スクロールを実装する方法を説明します。Vue でモバイル スクロールを実装する際の 注意点とは何ですか。実際のケースを見てみましょう。

1. まず、installinstall

npm install better-scroll --save

2. そして、コンポーネント内でreference

import BScroll from ‘better-scroll'

テンプレートは、公式ドキュメントに従って、スクロールされるDOM要素を参照します

参照

属性 説明、次のように DOM 要素を参照できます

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 サイトの他の関連記事を参照してください。