iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue如何实现分批加载数据
  • 359
分享到

Vue如何实现分批加载数据

2024-04-02 19:04:59 359人浏览 泡泡鱼
摘要

目录分批加载数据滚动加载数据分批加载数据 最近在写Vue的项目,因为后台返回的数据量太大,在调用了高德地图渲染"polyGon"覆盖物的时候处理不过来,直接蹦掉了

分批加载数据

最近在写Vue项目,因为后台返回的数据量太大,在调用了高德地图渲染"polyGon"覆盖物的时候处理不过来,直接蹦掉了,然后后台小哥哥和我讲可以分批处理~没想到真的是快了很多很多,眼过千变不如手过一遍~,在此记录一下!!!

首先我们需要定义四个全局的变量

  • pagindex 页码
  • pagesize 一页要请求多少条数据
  • pagetotal 一共要请求多少次(总数 / pagesize),总是是后台返回的~
  • intertimer存的定时器的函数,方便清除定时器
export default {
  name: "map_app",
  inject:['reload'],
  data() {
    return {
      pagindex: 1, //页码
      pagesize: 300, //页/条数
      pagetotal: 0, //一共要请求的次数
      intertimer: null, //定时器
     }
   }
}

然后再methods中写定时器 让定时器每隔三秒再去执行一个方法;

//定时器
getPageInter(map) {
  this.loading = this.$loading({ //加载层
        lock: true,
        text: "拼命加载中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
    });
 
    this.intertimer = setInterval(() => {
       this.intervalData(map); //每三秒调用一次方法
      }, 3000);
 },

然后再这个方法里面我们去做判断,如果当前请求的页数超过一共要请求的次数就清楚定时器!

//定时器2
intervalData(map) {
   if (this.pagindex > this.pagetotal) {
        clearInterval(this.intertimer); //关闭定时器
        this.loading.close(); //关闭弹窗
        this.pagindex = 1;
    } else {
        this.renderMesh(map); //数据渲染
        this.pagindex += 1;
      }
},

总数是后台小哥哥返回的,然后我们每次去请求接口的时候要给后台传当前是第几页,还有要请求多少条数据

renderMesh(map) { 
     this.$axiOS
       .get(this.Httpapi + "/api/Main/GetBlockMap", {
          params: {
            BlockCode: this.pageid,
            page: this.pagindex, //当前页码
            rownum: this.pagesize //请求数量
          }
      })
      .then(res => {
       console.log(res);
      })
      .catch(err => {
       console.log("请求失败233");
       });
}

因为我的总数是调用的另外一个接口,然后也写一下代码

    this.$axios
    .get(this.httpApi + "/api/Main/GetBlockMapCount", {
          params: {
            BlockCode: this.pageid
          }
     })
     .then(res => {
          let JSONData = eval("(" + res.data + ")");
          //总数除每次请求多少条数据得出一共要请求多少次
          this.pagetotal = Math.ceil(jsonData.totals / this.pagesize); 
      })
      .catch(err => {
          console.log("请求失败");
      });

滚动加载数据

核心方法:

handleScroll: function () {
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      var windowHeitht =
        document.documentElement.clientHeight || document.body.clientHeight;
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeitht >= scrollHeight - 2000) {
        if (this.scroll) {
          this.GetSpecialData();
        }
      }
    },
    GetSpecialData() {
      this.scroll = false;
      this.page.pageIndex++;
      this.load(this.page, this.query);
    },

监听:

 mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll, false);
  },

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。   

--结束END--

本文标题: Vue如何实现分批加载数据

本文链接: https://www.lsjlt.com/news/145583.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue如何实现分批加载数据
    目录分批加载数据滚动加载数据分批加载数据 最近在写vue的项目,因为后台返回的数据量太大,在调用了高德地图渲染"polygon"覆盖物的时候处理不过来,直接蹦掉了...
    99+
    2024-04-02
  • Vue怎么实现分批加载数据
    本篇内容主要讲解“Vue怎么实现分批加载数据”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue怎么实现分批加载数据”吧!分批加载数据最近在写vue的项目,因为后台返回的数据量太大,在调用了高德...
    99+
    2023-06-30
  • Db2中怎么实现批量加载数据
    在Db2中实现批量加载数据有多种方法,下面介绍两种常用的方法: 使用LOAD命令:Db2提供了LOAD命令用于将数据批量加载到表中...
    99+
    2024-03-08
    Db2
  • Android实现ListView分页加载数据
    本文实例为大家分享了ListView分页加载数据的具体代码,供大家参考,具体内容如下 FenyeActivity package com.example.myapplicatio...
    99+
    2024-04-02
  • vue如何加载本地json数据
    目录vue加载本地json数据json数据存放在除static静态文件夹中json数据存放在static静态文件夹中读取本地json文件并分页显示功能实现student.json数据...
    99+
    2024-04-02
  • 使用Vant如何实现数据分页,下拉加载
    目录Vant-ui的van-list实现数据分页加载主要三个属性vant上拉加载更多,下拉刷新Vant-ui的van-list实现数据分页加载 <!DOCTYPE html&g...
    99+
    2024-04-02
  • ajax如何实现加载数据功能
    这篇文章将为大家详细讲解有关ajax如何实现加载数据功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体内容如下xssj.php<script src="jquery-3.2....
    99+
    2023-06-08
  • Ajax如何实现动态加载数据
    这篇文章给大家分享的是有关Ajax如何实现动态加载数据的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。这个随笔实现了一个Ajax动态加载的例子。使用.net 的MVC框架实现。这个例子重点在前后台交互,其它略写。开...
    99+
    2023-06-08
  • vue如何实现路由懒加载
    在vue中实现路由懒加载的方法有:1.使用import方法实现;2.使用require.ensure()方法实现;3.使用vue异步组件实现;具体方法如下:使用import方法实现路由懒加载const Home = () => import...
    99+
    2024-04-02
  • PyTorch中DataLoader怎么实现数据加载和批处理
    在PyTorch中,DataLoader是一个用于批处理数据的工具,可以实现数据加载和批处理。要使用DataLoader,首先需要定...
    99+
    2024-04-02
  • Android怎么实现ListView分页加载数据
    本篇内容介绍了“Android怎么实现ListView分页加载数据”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!FenyeActivityp...
    99+
    2023-06-25
  • VUE路由动态加载如何实现
    这篇文章主要讲解了“VUE路由动态加载如何实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“VUE路由动态加载如何实现”吧!首先新建vue工程,一般我们不会特殊处理路由,但当项目页面越来越多...
    99+
    2023-07-04
  • PHP数组分页中如何实现懒加载?
    php 数组分页时实现懒加载的方法是:使用迭代器只加载数据集的一个元素。创建一个 arraypaginator 对象,指定数组和页面大小。在 foreach 循环中迭代对象,每次加载和处...
    99+
    2024-05-03
    php 懒加载
  • vue-router如何实现路由懒加载
    这篇文章主要为大家展示了“vue-router如何实现路由懒加载”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue-router如何实现路由懒加载”这篇文章吧...
    99+
    2024-04-02
  • Vue如何实现页面加载占位
    这篇文章主要介绍了Vue如何实现页面加载占位的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue如何实现页面加载占位文章都会有所收获,下面我们一起来看看吧。效果如下思路与实现页面加载时用户等待,此时与用户交互的...
    99+
    2023-07-05
  • vue如何实现纯前端表格滚动分页加载
    今天小编给大家分享一下vue如何实现纯前端表格滚动分页加载的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。实现效果实现过程&l...
    99+
    2023-06-29
  • Vue实现下拉滚动加载数据的示例
    目录第一步:安装第二步:引用第三步:使用Web项目经常会用到下拉滚动加载数据的功能,今天就来种草 Vue-infinite-loading 这个插件,讲解一下使用方法! 第一步:安装...
    99+
    2024-04-02
  • vue怎么实现滚动条加载更多数据
    这篇“vue怎么实现滚动条加载更多数据”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue怎么实现滚动条加载更多数据”文章吧...
    99+
    2023-07-04
  • 如何实现微服务前端数据加载
    这篇文章主要讲解了“如何实现微服务前端数据加载”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何实现微服务前端数据加载”吧!目前在不少团队里已经逐步实践落地...
    99+
    2024-04-02
  • vue如何实现路由根据开发状态懒加载
    小编给大家分享一下vue如何实现路由根据开发状态懒加载,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!路由根据开发状态懒加载1 一...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作