Vue에서 더 나은 스크롤 플러그인을 사용하는 방법

이 글은 주로 vue better-scroll 플러그인 사용에 대한 자세한 설명을 소개하고 참고하겠습니다.

Better-scroll은 iscroll을 다시 작성한 모바일 스크롤 솔루션입니다. iscroll과의 주요 차이점은 여기에 있습니다. better-scroll은 일반 스크롤 목록뿐만 아니라 회전식 차트, 선택기 등도 매우 강력합니다.

필요한 파일에

import BScorll from 'better-scroll';

에서 인용한 샘플 코드를 추가합니다.

let scroll = new BScroll(Dom对象, {//options
 startX: 0,
 startY: 0
})

Vue는 Dom 객체 메서드인

<p v-el:food-wrapper></p>//定义对象
this.$els.foodWrapper//获取对象

를 얻습니다(Vue는 데이터를 비동기식으로 업데이트하므로 Bscroll은 데이터가 완전히 로드되기 전에 대상 콘텐츠를 얻을 수 없습니다.

위 문제를 해결하려면 Vue의 nextTick()을 사용하세요.

(간단히 말하면 DOM은 최소한 모든 코드 이후에 업데이트되기 때문입니다. 따라서 데이터가 수정되고 DOM이 업데이트된 후에는 실행할 수 없습니다. DOM이 업데이트된 후 특정 코드 조각이 실행되도록 하려면 이 코드 조각을 setTimeout(fn, 0)과 같은 다음 이벤트 루프를 사용하면 DOM 업데이트 후 이 코드가 즉시 실행됩니다. )

// DOM 还没有更新
Vue.nextTick(function () {
 // DOM 更新了
})

문제:

PC 페이지에서는 클릭이 더 잘 차단되지 않습니다. 스크롤. 모바일 단말기에서 클릭 이벤트가 발생하도록 이벤트를 초기화하고 전달합니다. 따라서 PC 측으로 전환할 때 클릭 이벤트가 두 번 실행됩니다.

방법: 클릭 시 $event 변수를 전달합니다. Better-scroll 플러그인의 이벤트 이벤트는 기본 js의 이벤트와 다른 속성을 갖습니다. Better- 스크롤 플러그인에 의해 이벤트가 전달되면 event_constructed가 true가 됩니다.

selectMenu(index,event){
  if(!event._constructed){//如果不存在这个属性,则不执行下面的函数
    return;
  }
}

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되기를 바랍니다.

관련 기사:

jQuery에서 niceScroll 스크롤 막대 정렬 문제를 해결하는 방법

JS에서 Baidu 검색 인터페이스를 구현하는 방법

JS에서 이중 색상 볼 기능을 구현하는 방법

위 내용은 Vue에서 더 나은 스크롤 플러그인을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!