vue滾動軸插件better-scroll詳解

本文主要為大家詳細介紹了vue滾動軸插件better-scroll的使用方法，具有一定的參考價值，有興趣的小伙伴們可以參考一下嗎，希望能幫助到大家。

跟做慕課網的vue高仿外賣項目中用到了一個很好用的插件BScroll，用來計算左側menu欄對應右側food​​s欄相應顯示的食物區，如果不用插件就比較費事了，所以這裡分享一下這個外掛的簡單使用：

一、專案中下載，並引入

在設定檔package.json中引入版本

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

然後進入專案目錄,開啟cmd更新配置

#

npm i (i是install缩写)

最後引入，例如我在專案goods元件中使用則：

import BScroll from 'better-scroll';

二、舉栗子

需求是處於目前例如熱銷榜欄目，則選單列高亮。捲動到下一欄高亮欄則下一欄選單高亮。點選選單中某一欄選單該欄位高亮並且跳到對應食物區。

下面是foods元件中的程式碼

template：

<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利用better-scroll實作輪播圖與頁面捲動

JS實作scroll自訂捲動效果

關於jQuery捲動外掛程式scrollable.js用法分析

以上是vue滾動軸插件better-scroll詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！