vue3 pc端list滚动加载的简单实现

vue3 pc端list滚动加载的简单实现

昨天做了个功能，电脑端list实现滚动加载更多。原理并不难：获取滚动条，根据滚动条的scrollHeight、scrollTop、clientHeight计算出滚动条距底部的距离，如果滚动条滚动到底部，则触发事件。
但是我遇到了一个问题：给ul绑定了class,通过
document.querySelector获取不到ul，后来试了vue的事件@scroll，可以轻松获取到了。

<ul @scroll="handleScroll($event)">
	<li></li>
</ul>

在滚动事件中

//滚动事件
    const handleScroll = (event) => {
      let scrollBottom =// 滚动到底部的距离
                        event.target.scrollHeight -
                        event.target.scrollTop -
                        event.target.clientHeight;
      if(scrollBottom < 1){
        console.log('滚动到底部了')
        if(state.size<state.total){ //判断什么时候调用
          state.size += 10 //通过pageSize增加的方法加载更多数据
          getSearch(state.size) //调用接口方法
        }
      }
    }

到这里，基本功能就实现了。
在绑定的事件后可以加上.passive修饰符，它的作用是：事件的默认行为立即执行，不用等到函数执行完毕。可以让滚动事件更流畅。

<ul @scroll.passive="handleScroll($event)">
	<li></li>
</ul>