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

php中世界最好的语言
リリース: 2018-03-27 16:43:00
オリジナル
5073 人が閲覧しました

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート