滚动触发(Scroll Fire)

“滚动触发”是一种功能，该功能可以调用一个方法（一次且仅一次）, 当用户滚动当前页面并且该方法应用的DOM元素（或组件）进入视区时。

为了便于使用，它的实现是通过名为v-scroll-fire的Vue指令来实现的。

注意
还有一个v-scroll指令，当用户滚动页面时触发，可以读取这里。

安装

编辑 /quasar.conf.js:

framework: {
  directives: ['ScrollFire']
}

基本用法

<!-- 下面的VueModel的模板 -->
....
<div v-scroll-fire="bounceImage">...</div>
// 上面模板的VueModel 
{
  ...,
  methods: {
    bounceImage (element) {
      //在这个例子中，当`<div>`出现时，
      //我们使它弹跳2秒

      // 我们添加Quasar的CSS辅助类`animate-bounce` 
      element.classList.add('animate-bounce')
      setTimeout(() => {
        //我们确保节点仍然在DOM中
        //（渲染我们的<div>`时
        //用户尚未从Vue组件离开）
        //以使我们不会产生错误
        if (document.body.contains(element)) {
          //然后移除辅助类
          //停止弹跳
          element.classList.remove('animate-bounce')
        }
      }, 2000)
    }
  }
}

重要
出于性能考虑，注入的滚动侦听器函数默认50ms去抖(debounce)。 阅读更多关于debouncing 参考这里。

滚动容器确定

请阅读这里，了解Quasar如何确定附加滚动事件的容器。

滚动区域 回到顶部