0

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

2个回答

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

window.onscroll

撰写答案