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

Question

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

Answer 1

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

Answer 2

window.onscroll