vue滚动轴插件better-scroll详解

跟做慕课网的vue高仿外卖项目中用到了一个很好用的插件BScroll，用来计算左侧menu栏对应右侧foods栏相应显示的食物区，如果不用插件就比较费事了，因此这里分享一下这个插件的简单使用：

一、项目中下载，并引入

在配置文件package.json中引入版本

然后进入项目目录,打开cmd更新配置

最后引入，比如我在项目goods组件中使用则：

二、举个栗子

需求是处于当前比如热销榜栏目，则菜单栏高亮。滚动到下一栏高亮栏目则下一栏菜单高亮。点击菜单中某一栏菜单该栏目高亮并且跳转到对应食物区。

下面是foods组件中的代码

template：

<template>
 <p class="goods">
  <p class="menu-wrap" ref="menuWrap">//菜单栏
   <ul>
    <li v-for="(item,index) in goods" class="menu-item" :class="{'current':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详解的详细内容，更多请关注Gxl网其它相关文章！