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()을 사용하세요.

this.$nextTick()의 공식 설명을 보세요

그러므로 프로젝트에서 다음과 같이 작성해야 합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP의 다른 관련 기사에 주목하세요. 중국사이트!

추천 자료:

웹 측 애플리케이션에서 백포스 새로 고침 구현

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

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