Vue의 모바일 측에서 스크롤을 구현하는 방법

이번에는 Vue에서 모바일 측 스크롤을 구현하는 방법을 보여드리겠습니다. Vue에서 모바일 측 스크롤을 구현하는 방법에 대한 주의 사항은 무엇입니까?

1. 먼저 installinstall

npm install better-scroll --save

2. 그리고 reference

import BScroll from ‘better-scroll'

template에서 공식 문서 ref에 따라 스크롤되는 DOM 요소를 참조합니다.

설명, 다음과 같이 DOM 요소를 참조할 수 있습니다.

3. 메소드에 _initScroll 메소드를 등록합니다. 이 메소드는 better-scroll의 인스턴스화이며 이 메소드는 다음에서 사용됩니다. 향후 페이지 DOM 구조

methods: {
   _initScroll(){
    this.menuScroll = new BScroll(this.$refs.menuWrapper, {})
    this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {})
   }
  }
 }

4. Created() 메서드에서 배경 데이터를 성공적으로 얻은 후 콜백에서 _initScroll()을 호출합니다. Vue

따라서 데이터가 완전히 로드되기 전에 Bscroll은 대상 콘텐츠의 높이를 얻을 수 없으므로 스크롤할 수 없는 현상이 발생합니다. 여기서 주목해야 할 점은 데이터를 성공적으로 얻은 후에는 직접 Dom입니다. 반드시 데이터를 얻은 후 렌더링할 필요는 없으므로 nextTick() 메서드를 사용해야 합니다. this.nextTick의 콜백에서 _initScroll()을 사용하세요.

추천 자료:

JsChart 구성 요소 사용에 대한 자세한 설명

위 내용은 Vue의 모바일 측에서 스크롤을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!