vue--使用鼠标滚动加载数据

最新推荐文章于 2024-08-08 18:23:33 发布

chen_晨风

最新推荐文章于 2024-08-08 18:23:33 发布

阅读量4.5k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/qq_37674616/article/details/83316070

版权

本文介绍如何在Vue应用中实现鼠标滚动到页面底部时动态加载数据。主要步骤包括设置加载状态标志，设置滚动区域样式，监听滚动事件，判断是否到达底部，并根据标志位决定是否加载新数据。

摘要由CSDN通过智能技术生成

关于用鼠标滚动到某个位置我们就去加载数据，这样的场景与业务需求现在越来越常见，现在来分析下《vue.js 实战》中作者的一个解决策略:

1. 设置一个标志位用来判断数据是否在加载中

2. 将滚动区域设置成 overfow:auto（显示滚动条）

3. 给滚动区域加入监听事件并绑定ref属性来获取DOM实例

4. 当鼠标滚动到底部时，加载数据

4.1 如果此时标志位为true则直接退出，不进行此时数据加载

关键代码如下:

<template>
    //...代码省略
//该div 为要滚动区域
<div class="daily-list" ref="list" @scroll="handleScroll">
   // ...
</div>
</template>
<script>
  export default{
     data(){
        return {
            recommendList:[], //存放滚动区域要显示的数据
            isLoading:false  //默认没有在加载数据
        }
    },
    methods:{
        //获取数据
       getRecommendList(){
                //表示正在加载数据
            this.isLoading=true;
            $.ajax.get('news/before/'+preDay).then(res=>{
                this