VueでBetter-Scrollプラグインを使用する方法

この記事では主にvue better-scrollプラグインの使い方を詳しく紹介しますので、参考にしてください。

better-scroll とは

better-scroll は、iscroll の書き換えに基づいています。iscroll との主な違いは次のとおりです。 better-scroll は、通常のスクロール リストだけでなく、カルーセル チャートやピッカーなども作成できます。

import BScorll from 'better-scroll';

で引用されたサンプル コードを必要なファイルに追加します。

let scroll = new BScroll(Dom对象, {//options
 startX: 0,
 startY: 0
})

Vue は Dom オブジェクト メソッドを取得します。

<p v-el:food-wrapper></p>//定义对象
this.$els.foodWrapper//获取对象

(Vue はデータを非同期で更新するため、データが完全にロードされる前に Bscroll はターゲット コンテンツを取得できません。高さがあるため、スクロールできない現象が発生します)

上記の問題を解決するには、Vue の nextTick();

(簡単に言うと、少なくとも DOM は、現在のティックは実行されているため、データが変更されて DOM が更新された後に実行することは可能です。DOM の更新後に特定のコードが実行されるようにするには、このコードをsetTimeout(fn, 0) などの次のイベント ループにより、DOM の更新後、このコードがすぐに実行されます。)

// DOM 还没有更新
Vue.nextTick(function () {
 // DOM 更新了
})

問題:

PC ページでは、クリックはより良いものによってブロックされません。モバイル端末にクリックイベントがあるように、イベントを初期化してディスパッチします。そのため、PC 側に切り替えるときに、クリックイベントが 2 回実行されます。 Better-scroll プラグインのイベント イベントには、ネイティブ JS のイベントとは異なる属性があります。 より良い - イベントがスクロール プラグインによって送出される場合、event_constructed は true になります。

selectMenu(index,event){
  if(!event._constructed){//如果不存在这个属性,则不执行下面的函数
    return;
  }
}

以上、皆さんの参考になれば幸いです。

関連記事:

jQueryでniceScrollスクロールバーの位置がずれている問題を解決する方法

JSでBaidu検索インターフェースを実装する方法

JSで二色ボール関数を実装する方法

以上がVueでBetter-Scrollプラグインを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。