位置: 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加载速度慢)

  • 销售返利可以计入销售费用吗
  • 企业重组的特殊性税务处理比例
  • 电梯的税收筹划怎么做
  • 怎样注册投资有限公司
  • 核定征收需要什么条件和手续
  • 知识产权投资是什么意思
  • 收到预付款项发票如何入账?
  • 高速过路费抵扣增值税
  • 被辞退还有退休金吗
  • 物业公司收取水费如何开具发票
  • 园林绿化公司前景如何
  • 企业清算企业所得税税率
  • 合并往来分录
  • 初级考试备考计划
  • 小规模纳税人适用的增值税征收率
  • 1697511073
  • 鸿蒙os程序
  • 怎样打开电脑wifi连接
  • 预提费用冲销需要重新计提吗
  • 增值税发票的进项和出项要一致吗
  • 政府发放奖励金如何入账
  • php __destruct
  • 销售折让怎么开票
  • 以太网默认网关怎么查看
  • mac键盘快捷键设置
  • 苹果macOS 11开发者预览版发布
  • excel多表操作法
  • latex双栏图片
  • 系统win7旗舰版
  • php5升级到php7
  • uniapp支付流程
  • 商贸企业税收优惠政策
  • php储存数据的方法
  • framework core
  • 购入固定资产款项已付
  • php 动态执行代码
  • 汇算清缴的表在哪里
  • php对象
  • 太原市插画工作室
  • php接口开发详解
  • Editorial Calendar为你的WordPress添加编辑日历 让文章定时发布更简单
  • 帝国cms和thinkphp哪个好
  • 外贸企业代理出口退税给谁
  • dedecms配置
  • 生产车间发放工资
  • 跨年度退回的公共预算支出
  • 受让应收账款的账务处理
  • 个税清算所得税怎么计算
  • 企业如何做增值业务
  • 房地产企业成本核算方法
  • 少数股东权益贷方表示什么意思
  • 电子缴税付款凭证怎么做记账凭证
  • 税率与征收率是怎么回事
  • 绩效工资定义及标准
  • 进料料件复出可以给第三方吗
  • 预收账款处理
  • 红字冲账的记账凭证
  • 通讯发票可以税后抵扣吗
  • 采用现销方式销售商品的会计分录
  • sql批量替换字符串
  • 配置windouws update
  • windows xp怎么打开
  • win7蓝屏是因为哪个补丁
  • linux查看磁盘io负载
  • cocos2dx 不规则按钮的实现
  • js中的三种弹出式消息提醒的命令是什么
  • [置顶]JM259194
  • 安卓演示模式有什么用
  • Ubuntu修改用户名
  • python-shell
  • JavaScript中的复杂数据类型又称为
  • 又一枚精彩的弹幕效果jQuery实现
  • jquery插件库怎么导入
  • 代码实现观察者模式
  • 重庆税务总局发票查询
  • 税务局不动产交易缴税方案
  • 土地增值税优惠政策办理流程和手续方面的精简措施
  • 医保未参保怎么参保 支付宝
  • 减免税备案登记表样本
  • 企业税收有哪些税种
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设