vue スクロール軸プラグイン better-scroll の詳細説明

この記事では、vue スクロール軸プラグイン better-scroll の使い方を詳しく紹介します。興味のある方は参考にしていただければ幸いです。

MOOC.com の Vue 高模倣テイクアウト プロジェクトでは、非常に便利なプラグイン BScroll を使用して、右側の食品列に対応する左側のメニュー列に表示される対応する食品領域を計算します。プラグインがないとさらに面倒です。そこで、このプラグインの簡単な使用法を共有します:

1. プロジェクトにダウンロードして導入します

設定ファイル package.json にバージョンを導入します

"dependencies": {
  "better-scroll": "^0.1.7"
 }

次に、プロジェクト ディレクトリに入り、cmd を開いて構成を更新します

npm i (i是install缩写)

最後の紹介、たとえば、プロジェクトのグッズ コンポーネントで使用します:

import BScroll from 'better-scroll';

2 つ目、たとえば

たとえば、メニュー バーが強調表示されます。次の強調表示された列までスクロールすると、次の列のメニューが強調表示されます。メニュー内の特定の列をクリックして強調表示し、対応する食品エリアにジャンプします。

以下は食品コンポーネントのコードです
​​

テンプレート:

<template>
 <p class="goods">
  <p class="menu-wrap" ref="menuWrap">//菜单栏
   <ul>
    <li v-for="(item,index) in goods" class="menu-item" :class="{&#39;current&#39;:currentIndex===index}" @click="selectMenu(index,$event)">
     <span class="text border-1px">
      <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
     </span>
    </li>
   </ul>
  </p>
  <p class="foods-wrap" ref="foodsWrap">//食物栏
  </p>
 </p>
</template>

script

関連推奨事項:

vueはベタースクロールを使用してカルーセル画像とページスクロールを実装します

JSはスクロールカスタムスクロール効果を実装します

jQueryスクロールプラグインscrollable.jsの使用分析について

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