Question

我有一个用例，我希望根据滚动位置动态更改CSS类，这将在here中进行描述。

我在考虑使用vue-scroll。我做了以下更改：

使用npm安装：

npm install vue-scroll --save

在 main.js 中进行了以下更改：

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
  }
})

这可能导致这种情况无效。

Answer 1

~~这个lib似乎没有处于非常稳定的状态，我设法使用@scroll='onScroll'或v-on:scroll='onScroll语法使其工作。职位arg不是很难，你需要使用element.scrollTop。~~

~~看起来文档已经过时，文档中显示的语法可能与vue 1.x有关。~~

<强> EDITED

实际上，我完全错了，v-on:scroll和@scroll将由vue本身处理，不需要vue-scroll lib。 vue-scroll lib实际上在我链接的示例中不起作用。

我猜你可以使用vue内置的滚动而不是vue-scroll lib

您可以看到一个有效的示例（已删除技术支持诈骗链接）

Answer 2

不需要为Vue默认提供的作品安装软件包。

就我而言，@scroll无效，但v-scroll有用。

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

如何使用vue-scroll

2 个答案: