如何使用Vue viewport插件触发viewport可见函数

pw136qt2  于 2023-04-21  发布在  Vue.js
关注(0)|答案(2)|浏览(321)

我正在使用一个计数器来显示一些数字,但它们在页面加载时加载,所以除非我做一些按钮来触发它,否则它会加载。找到这个viewport插件(https://github.com/BKWLD/vue-in-viewport-mixin),但我无法使用它。这就是我需要做的,当我到达某个元素(完全)时触发一个函数,如何实现它?

k3bvogb1

k3bvogb11#

你不一定需要一个包来做这件事。添加一个事件监听器来监听滚动事件,并在每次有滚动事件时检查元素是否在视口中。下面的示例代码-注意我添加了一个动画来强调“如果在视口中出现”的效果。
Codepen here

new Vue({
  el: '#app',
  created () {
    window.addEventListener('scroll', this.onScroll);
  },
  destroyed () {
    window.removeEventListener('scroll', this.onScroll);
  },
  data () {
    return {
      items: [
        1,
        2,
        3,
        4,
        5,
        6, 
        7, 
        8, 
        9, 
        10, 
        11, 
        12
      ],
      offsetTop: 0
    }
  },
  watch: {
    offsetTop (val) {
       this.callbackFunc()
    }
  },
  methods: {
    onScroll (e) {
      console.log('scrolling')
      this.offsetTop = window.pageYOffset || document.documentElement.scrollTop
    },
    isElementInViewport(el) {
      var rect = el.getBoundingClientRect();
      return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
      );
    },
    callbackFunc() {
      let items = document.querySelectorAll(".card");
      for (var i = 0; i < items.length; i++) {
        if (this.isElementInViewport(items[i])) {
          items[i].classList.add("in-view");
        }
      }
    }
  }
})
.card {
  height: 100px;
  border: 1px solid #000;
  visibility: hidden;
  opacity: 0
}
.in-view {
  visibility: visible;
  opacity: 1;
  animation: bounce-appear .5s ease forwards;
}

@keyframes bounce-appear {
  0% {
    transform: translateY(-50%) translateX(-50%) scale(0);
  }
  90% {
    transform: translateY(-50%) translateX(-50%) scale(1.1);
  }
  100% {
    tranform: translateY(-50%) translateX(-50%) scale(1);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app" onscroll="onScroll">
  <div v-for="item in items" class="card">
    {{item}}
  </div>
</div>

另一种选择是使用交叉点观察器-我还没有探索过这个,但这个教程似乎不错:请alligator.io/vuejs/lazy-image注意,您将需要IE的polyfill。

4sup72z8

4sup72z82#

我使用Intersection Observer constructor实现了类似的功能。

let observer = null;

onMounted(()=>{
  observer = new IntersectionObserver(callback, {
      threshold: 0.5, // proportion of element visible to trigger action
    });
  observer.observe(refOfElement)
})

const callback = (entry) => {
  // action to trigger
}

相关问题