이 글은 주로 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="{'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을 사용하여 캐러셀 이미지 및 페이지 스크롤을 구현합니다.
jQuery 스크롤 플러그인 scrollable.js 사용 분석 정보
위 내용은 vue 스크롤 축 플러그인 better-scroll에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!