Detailed explanation of vue scroll axis plug-in better-scroll

This article mainly introduces in detail how to use the vue scroll axis plug-in better-scroll. It has a certain reference value. Interested friends can refer to it. I hope it can help everyone.

A very useful plug-in, BScroll, is used in the vue high-imitation takeout project of MOOC.com, which is used to calculate the food area displayed in the menu column on the left corresponding to the foods column on the right. If no plug-in is used, It is quite troublesome, so here I will share the simple use of this plug-in:

1. Download it in the project and introduce it

Introduce the version in the configuration file package.json

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

Then enter the project directory, open cmd to update the configuration

npm i (i是install缩写)

Finally introduce it, for example, I am in the project goods component Instructions for use:

import BScroll from 'better-scroll';

2. For example

If the demand is in the current best-selling column, for example, the menu bar will be highlighted. Scroll to the next highlighted column and the menu in the next column will be highlighted. Click on a certain column in the menu to highlight it and jump to the corresponding food area.

The following is the code in the foods component

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

Related recommendations:

vue uses better-scroll to implement carousel images and page scrolling

JS Implement scroll custom scrolling effect

About jQuery scrolling plug-in scrollable.js usage analysis

The above is the detailed content of Detailed explanation of vue scroll axis plug-in better-scroll. For more information, please follow other related articles on the PHP Chinese website!