vue 스크롤 축 플러그인 better-scroll에 대한 자세한 설명

이 글은 주로 Vue 스크롤 축 플러그인을 더 잘 사용하는 방법을 자세히 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

MOOC.com의 Vue 고모방 테이크아웃 프로젝트에서는 매우 유용한 플러그인 BScroll을 사용하여 오른쪽의 음식 열에 해당하는 왼쪽 메뉴 열에 표시되는 해당 음식 영역을 계산합니다. 플러그인이 없으면 더 귀찮습니다. 따라서 여기서는 이 플러그인의 간단한 사용법을 공유합니다.

1. 프로젝트에서 다운로드하고

구성 파일 package.json에 버전을 소개하세요

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

그런 다음 프로젝트 디렉토리에 들어가서 cmd를 열어 구성을 업데이트하세요

npm i (i是install缩写)

마지막 소개, 예를 들어 프로젝트 상품 구성 요소에서 사용합니다.

import BScroll from 'better-scroll';

두 번째, 예를 들어

수요 예를 들어 메뉴 표시줄이 강조 표시됩니다. 강조 표시된 다음 열로 스크롤하면 다음 열의 메뉴가 강조 표시됩니다. 메뉴의 특정 열을 클릭하면 해당 열이 강조 표시되고 해당 음식 영역으로 이동합니다.

다음은 음식 구성 요소

의 코드입니다. 템플릿:

<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는 스크롤 사용자 정의 스크롤 효과를 구현합니다

jQuery 스크롤 플러그인 scrollable.js 사용 분석 정보

위 내용은 vue 스크롤 축 플러그인 better-scroll에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!