vue.js - vue怎么实现向下滚动动态加载页面？

问题描述

问 题

向下滚动到某个元素节点的位置，动态加载该节点。
重点是如何确定节点的位置，如果是一个节点的话，就设置数字就好了，不过如果有很多个节点都要动态显示，那不就需要很多show_x

解决方案

首先v-if来不渲染这个组件，监听滚动，滚动具体位置后，再通过v-if渲染出来。至于组件初次渲染动画可以看官方文档

<transition enter-active-class="animated bounceInRight" appear>
    <div>4545456</div>
<transition />

appear 是初次渲染， 我用的是 animate.css， 你也可以自己写

监听滚动，获取这个组件距离页面顶部的高度，如果这个高度小于页面的高度，就做你要做的内容

data () {
  return {
  }
},
methods: {
  scrollFuc () {
    // 获取这个组件距离页面顶部的高度，如果这个高度小于页面的高度。。。。。
    // 获取距离顶部高度this.$refs.xxxx.getBoundingClientRect().top, 
    // 页面的高度： window.innerHeight,
    // 还有一个要注意的地方，就该组件还没渲染，找不到怎么办，用一个div包着它，
    // 找这个div不就行了，但是这个div最小高度是1，不能没有高度，原因，是浏览器兼容问题，
  }
},
ready () {
  // 监听滚动
  window.addEventListener('scroll', this.scrollFuc)
}

这篇关于vue.js - vue怎么实现向下滚动动态加载页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！