vue-scroll 사용 방법

vue-scroll 사용 방법

여기서 설명하는 스크롤 포스테이션을 기반으로 CSS 클래스를 동적으로 변경하는 사용 사례가 있습니다.

이거에 vue-scroll을 사용할까 생각 중이에요.다음과 같이 변경했습니다.

npm을 사용하여 설치:

npm install vue-scroll --save

main.displays에서 다음과 같이 변경되었습니다.

import Vue from 'vue'
import vScroll from 'vue-scroll'
Vue.use(vScroll)

다음 중 하나의 컴포넌트에 추가되어 있습니다.

<div  v-scroll="onScroll">
   ...
   ...
   <p>scrollTop:<span>{{position &&  position.scrollTop}}</span></p>
   ...
   ...
</div>

컴포넌트의 변경은 다음과 같습니다.

export default {
  data () {
    return {
      position: null
    }
  },
 methods: {
    onScroll (e, position) {
      console.log('comes here ' + position)
      this.position = position
    }
},

그러나, 이것은 동작하지 않고, 다음과 같이 main.js에 지시로서 등록하려고 했지만, 이것도 도움이 되지 않았습니다.

const app = new Vue({
  router,
  store,
  el: '#app',
  template: '<App/>',
  components: { App }, // Object spread copying everything from App.vue
  directives: {
    'v-scroll': vScroll  // tried 'vScroll': vScroll as well
  }
})

이것이 작동하지 않는 이유로는 무엇이 있을 수 있습니까?

이 lib는 그다지 안정된 상태가 아닌 것 같습니다.저는 이 lib를 사용하여 동작시킬 수 있었습니다.@scroll='onScroll'또는v-on:scroll='onScroll구문을 사용합니다.arg의 위치는 튼튼하지 않습니다.사용해야 합니다.element.scrollTop.

설명서가 오래된 것 같습니다.설명서에 나와 있는 구문은 vue 1.x에 관한 것일 수 있습니다.

편집필

사실, 내가 완전히 틀렸었어v-on:scroll그리고.@scrollvue 자체에서 처리되므로 vue-lib는 필요 없습니다.링크한 예에서는 vue-scroll lib가 실제로 작동하지 않습니다.

Vue의 빌트인 스크롤을 사용할 수 있을 것 같습니다.vue-scrolllib

작업 예를 볼 수 있습니다(기술 지원 사기 링크 삭제).

이미 Vue가 기본적으로 제공하는 작업에 대해 패키지를 설치할 필요가 없습니다.

저 같은 경우에는@scroll효과가 없었지만v-scroll했다.

<div  v-scroll="onScroll">
<!-- stuff -->
</div>

언급URL : https://stackoverflow.com/questions/41096272/how-to-use-vue-scroll