关于Vue中页面(父组件)下拉，页面中的子组件加载更多数据的实现方法

Posted 2022-08-14 jane2160

一个项目中存在很多这种情况：父组件（页面）中的子组件需要做下拉加载更多的需求，但是这个下拉到底部的动作只能通过监控页面（父组件）来完成

这就需要父子组件之间的通信，代码如下：

 

1. 建立一个用于父子组件通信的工具，bus.js

import Vue from ‘vue‘
let bus = new Vue()

export default bus

 

2. 在父组件中监听页面的下拉，并用bus将下拉到底部时这个信号发给子组件，此处bus.js放在lib文件夹下，.container为页面最外层的class

import Bus from ‘@/lib/bus‘

methods: 
    scrollListener () 
      if (window.scrollTimer) clearTimeout(window.scrollTimer)
      window.scrollTimer = setTimeout(() => 
        let el = document.querySelector(‘.container‘)
        let innerDiv = document.querySelector(‘.container>div‘)
        if (el.scrollTop + window.innerHeight >= innerDiv.clientHeight) 
          // 发送拉到底部的信号给子组件
          Bus.$emit(‘loadMore‘)
        
      , 250)
    

mounted () 
    document.querySelector(‘.container‘).addEventListener(‘scroll‘, this.scrollListener)
  

 

3. 在子组件中接受该信号，并调用加载数据的方法

created () 
    Bus.$off(‘loadMore‘)
    Bus.$on(‘loadMore‘, () => 
      // 在此调用加载更多数据的方法
    )