位置: IT常识 - 正文

Vue组件滚动加载、懒加载功能的实现,无限滚动加载组件实例演示(vue组件元素设置滚动条高度)

编辑:rootadmin
Vue组件滚动加载、懒加载功能的实现,无限滚动加载组件实例演示

推荐整理分享Vue组件滚动加载、懒加载功能的实现,无限滚动加载组件实例演示(vue组件元素设置滚动条高度),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue滚动条组件,vue表格滚动加载数据,vue中滚动插件,vue滑动加载,vue滚动条组件,vue滚动条组件,vue滚动条组件,vue中滚动插件,内容如对您有帮助,希望把文章链接给更多的朋友!

效果图如下: 可以看到随着不断的滚动,页面组件的数量不断的加载。 其实加载的是后端返回的数据,因为涉及隐私,没有给显示出来。 利用懒加载,可以防止大量渲染造成卡顿降低用户体验。 页面的动态加载这块可以看上一篇文章: Vue 动态添加和删除组件的实现,子组件和父组件的传值实例演示

Vue组件滚动加载、懒加载功能的实现,无限滚动加载组件实例演示(vue组件元素设置滚动条高度)

下面主要讲一下动态加载的实现思路: 首先懒加载主要有两种形式,一种是不断的从后端请求返回前端,每次获取一部分数据,另一种是一次性把数据加载到前端,然后一部分一部分的展示。 本次演示的数据量不大,采用后面的方法来实现。

首先利用 axios 从后台获取数据,存储下来,并且执行一次加载组件的动作。

// 向后台发送请求得到数据 get_data(){ axios .get('http://127.0.0.1:10086') .then(response => { this.response_data=response.data; // 默认执行一次数据加载 this.load_data(); }) // 请求失败抛出异常在控制台 .catch(function (error) { console.log(error); }); }

然后对滚动进行监听 window.addEventListener('scroll', this.rolling); 当检测滚动条滚到底部时,加载数据。 当滚动过的距离 + 可视区的高度 >= 滚动条长度时,就相当于滚动到了底部。

rolling () { // 滚动过的距离 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 当前可视区的高度 var clientHeight = document.documentElement.clientHeight // 滚动条的长度 var scrollHeight = document.documentElement.scrollHeight // 当滚动过的距离+可视区的高度>=滚动条长度时,就相当于滚动到了底部 if (scrollTop + clientHeight >= scrollHeight) { this.load_data(); } }

下面是主要的代码

methods:{ // 数据加载 load_data(){ for(var i=0; i<6; i++){ this.index++; if(this.index<Object.keys(this.response_data).length+1){ this.album.push(this.response_data[this.index.toString()]); } } }, // 向后台发送请求得到数据 get_data(){ axios .get('http://127.0.0.1:10086') .then(response => { this.response_data=response.data; // 默认执行一次数据加载 this.load_data(); }) // 请求失败抛出异常在控制台 .catch(function (error) { console.log(error); }); }, rolling () { // 滚动过的距离 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 当前可视区的高度 var clientHeight = document.documentElement.clientHeight // 滚动条的长度 var scrollHeight = document.documentElement.scrollHeight // 当滚动过的距离+可视区的高度>=滚动条长度时,就相当于滚动到了底部 if (scrollTop + clientHeight >= scrollHeight) { this.load_data(); } } }, mounted() { // 加载数据 this.get_data(); // 添加滚动监听 window.addEventListener('scroll', this.rolling); }, data(){ return{ album: [], index: 0, response_data: "" } }

喜欢的点个赞❤吧!

本文链接地址:https://www.jiuchutong.com/zhishi/297568.html 转载请保留说明!

上一篇:Vue框架简介(vue框架是什么样子的)

下一篇:Vue首屏加载过慢出现白屏的六种优化方案(vue加载速度慢)

  • 怎么看显卡真假(怎么看显卡配置)(怎样查看显卡真假)

    怎么看显卡真假(怎么看显卡配置)(怎样查看显卡真假)

  • 红米k30pro屏幕刷新率是60hz吗(红米k30pro刷屏多少)

    红米k30pro屏幕刷新率是60hz吗(红米k30pro刷屏多少)

  • 天猫魔盒有线连接设置方法(天猫魔盒有线连接怎么投屏)

    天猫魔盒有线连接设置方法(天猫魔盒有线连接怎么投屏)

  • 手机屏幕跟边框脱胶了(手机屏幕跟边框脱胶了影响使用吗)

    手机屏幕跟边框脱胶了(手机屏幕跟边框脱胶了影响使用吗)

  • 抖音正常播放量是多少(抖音刷播放双击24小时在线秒刷)

    抖音正常播放量是多少(抖音刷播放双击24小时在线秒刷)

  • 抖音购物记录怎么查询(抖音购物记录怎么能不让人看到?)

    抖音购物记录怎么查询(抖音购物记录怎么能不让人看到?)

  • 华为的截屏在哪里找到(华为的截屏在哪里设置)

    华为的截屏在哪里找到(华为的截屏在哪里设置)

  • 微信举报别人成功了,别人会知道吗(微信举报别人成功怎么撤销)

    微信举报别人成功了,别人会知道吗(微信举报别人成功怎么撤销)

  • 用录音机可执行文件的类型有(录音机可执行的文件类型有哪些)

    用录音机可执行文件的类型有(录音机可执行的文件类型有哪些)

  • 苹果更新系统一直白屏(苹果更新系统一直在准备更新)

    苹果更新系统一直白屏(苹果更新系统一直在准备更新)

  • 骁龙665和麒麟710F对比(麒麟710和骁龙660)

    骁龙665和麒麟710F对比(麒麟710和骁龙660)

  • 7p闪退怎么回事(7p总闪退怎么回事)

    7p闪退怎么回事(7p总闪退怎么回事)

  • 定位与导航的区别(定位与导航的概念)

    定位与导航的区别(定位与导航的概念)

  • 封号看不到朋友圈吗(封号能看到别人发的消息吗)

    封号看不到朋友圈吗(封号能看到别人发的消息吗)

  • 手机去电秀怎么设置(手机怎么去电池)

    手机去电秀怎么设置(手机怎么去电池)

  • 扩列是什么意思(qq扩列是什么意思)

    扩列是什么意思(qq扩列是什么意思)

  • 手机欠费不交会怎样(手机欠费不交会上征信吗)

    手机欠费不交会怎样(手机欠费不交会上征信吗)

  • 淘宝实名认证怎么解除绑定(淘宝实名认证怎么换绑)

    淘宝实名认证怎么解除绑定(淘宝实名认证怎么换绑)

  • 计算器的ac键表示(计算器的ac键表示什么)

    计算器的ac键表示(计算器的ac键表示什么)

  • 群聊里怎样关闭朋友圈(怎样关闭群聊而不删除?)

    群聊里怎样关闭朋友圈(怎样关闭群聊而不删除?)

  • 电脑指纹传感器在哪(电脑指纹传感器坏了怎么办)

    电脑指纹传感器在哪(电脑指纹传感器坏了怎么办)

  • 华为p30pro来电跑马灯怎么设置(p30pro来电跑马灯怎么设置)

    华为p30pro来电跑马灯怎么设置(p30pro来电跑马灯怎么设置)

  • 手机app是什么(哈佛h6手机app是什么)

    手机app是什么(哈佛h6手机app是什么)

  • 站酷如何发表作品(站酷怎么发作品)

    站酷如何发表作品(站酷怎么发作品)

  • 进项发票已认证,发现发票有问题怎么办
  • 股权置换税收
  • 公司卖出货物没有入库记录如何做账?
  • 小规模零税率申报流程
  • 2021年销售农机免增值税吗
  • 房地产企业季度所得税申报
  • 合同负债里面含增值税吗
  • 变更了公司名称以前的发票还可以抵扣吗
  • 保证金可以挪用吗
  • 公允价值变动损益和投资收益区别
  • 房地产开发公司排名
  • 年未决算的现金利润怎么算
  • 已过期增值税专票怎么开
  • 固定资产管理中存在的问题及对策论文
  • 债权转增资本应缴纳什么税
  • 研发人员报销
  • 本月无销项只有进项申报表如何填写
  • 分公司开票怎么做账
  • 现代服务业要满足什么条件才转一般纳税人
  • 自然人销售固定资产
  • 金税盘要钱不
  • 什么情况下税务会查账
  • 物业费需不需要物价局审批
  • 销售已作进项税转出的固定资产怎样缴税?
  • 公司收到个人借款的现金流量
  • 手表的发票可以报销吗
  • 新公司值得入职吗
  • 生产型出口企业的概念
  • 民间非营利组织会计科目
  • 公司如何确定总股本
  • 公司开业前启动大会
  • 冲减预付款
  • 在php中,字符串有哪些表示形式
  • 库存股的会计科目
  • 深入解析wordpress
  • vue有哪些方法
  • 深入vue3+typescript技术栈
  • php 方括号
  • 取得农产品免税发票如何账务处理
  • 现金销售商品的会计分录
  • 企业注销时实收资本没有到位要紧吗
  • dedecms安装步骤
  • php验证码代码怎么写
  • 购进新车旧车置换流程
  • 公司开业装修费会计分录
  • 合并设立是什么意思
  • 积分换物品是真的吗
  • 事业单位跨年度错账调整
  • 在税收方面属于什么领域
  • 作废的金额包含在总额里面吗
  • 当月开的票当月可以勾选抵扣吗
  • 公司社保收费标准
  • 公司出售自建厂房
  • 停车费发票能报餐饮费吗怎么开
  • 固定资产大修理支出摊销年限
  • 本年利润的计算顺序为
  • 记账凭证负数怎么填写样板
  • 收缩后对数据库有影响吗
  • distinct 多个
  • win7怎么隐藏我的电脑
  • win7 64位系统如何查看计算机名称为了应付某一操作
  • Windows Server 2003网络负载均衡如何实现
  • bios中怎么设置显卡
  • 怎样打开windows设置页面
  • SWNETSUP.EXE - SWNETSUP是什么进程 有什么用
  • 如何在windows沙盒中导入文件
  • linux安装bz2
  • unity点击按钮没反应
  • unity me
  • node js并发加载缓慢
  • 噩梦act2
  • python中的字符串必须写在一对双引号中
  • android下的单元测试要配置以下说法不正确的是
  • jquery跨域获取页面内容
  • 河南省残疾人个税优惠政策
  • 单据整理方法
  • 海关税目表
  • 广西城建投资集团官网
  • 电子税务网没开通怎么办
  • 漳州市医保缴费标准
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设