前端vue里面点击加载更多_vue 原生添加滚动加载更多

vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱。我们在mounted建立滚动,destroyed销毁滚动。

mounted () {

window.addEventListener('scroll', this.handleScroll)

},

destroyed () {

window.removeEventListener('scroll', this.handleScroll)

},

定义一个函数,在滚动到底部时候使滚动条距离顶部距离与可视区域高度之和等于滚动条总高度,在加载后如果列表长度为0时应该停止加载,要不会出现一直加载的情况

handleScroll () {

//变量scrollTop是滚动条滚动时,距离顶部的距离

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

//变量windowHeight是可视区的高度

var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;

//变量scrollHeight是滚动条的总高度

var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;

//滚动条到底部的条件

if(scrollTop+windowHeight==scrollHeight &&this.list.length !==0){

this.loadMore() // 加载的列表数据

}

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/511903.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

双11特刊|十年磨一剑,云原生多模数据库Lindorm 2021双11总结

前言 2021 年,转眼 Lindorm 已经在阿里发展了十年的时间,从基于 HBase 深度改造的 Lindorm 1.0 版本,到全面重构,架构大幅升级的 Lindorm 2.0 版本;从单一的宽表引擎,到支持搜索、时序、文件等多种结构化数…

怎么样升级成为鸿蒙系统,手机升级成为鸿蒙系统第一手体验怎么样?-电脑自学网...

自从华为鸿蒙系统上线以来,除了6月2日发布会爆料出鸿蒙细节、功能之外,还给部分华为手机提供了鸿蒙系统的升级包。不知道大家有没有升级?其实很多小伙伴处于观望状态,因为新系统的缺点不可避免,升级了系统就再也回不去…

换个姿势看 hooks,灵感来源组合和 HOC 模式下逻辑视图分离新创意

作者 | 👽来源 | 前端Sharing前言懂得 JSX 本质的同学都知道它只不过是一种语法糖,会被 babel 处理成 createElement 的形式,最后再变成常规的 js 对象。所以,我们就可以在 js 逻辑层面对 element 对象做处理,自定义 …

双11特刊 | 云数据库RDS如何顺滑应对流量洪峰

简介:从绿色低碳到硬核科技,看RDS如何用绿色科技助力2021“双11”? 双十一回顾 从平台到商家,再从物流到客户手中,云数据库RDS支撑着双11集团电商的在线业务。RDS首次对集团核心业务进行国产化技术演进试点&#xff…

python交叉编译的配置 脚本怎么写_如何写一个简单的脚本并配置

什么是脚本:脚本就是一个给计算机照着做的东西cd ~/desktop 回到桌面mkdir demo 创建一个demo的文件夹cd demo 进入demo这一系列命令的组合就是脚本,当我们运行脚本的时候,计算机就会按着我们输入的命令一步一步操作。找一个安全的目录下&…

双11专刊|云原生数据仓库AnalyticDB支撑双11,大幅提升分析实时性和用户体验

简介:2021年双十一刚刚落幕,已连续多年稳定支持双十一大促的云原生数据仓库AnalyticDB,今年双十一期间仍然一如既往的稳定。除了稳定顺滑的基本盘之外,AnalyticDB还有什么亮点呢?下面我们来一一揭秘。 一 前言 2021年…

html传输的数值表示的含义,数字传递游戏的意义与感悟_传数字游戏心得体会

在大学生入职培训期间,曾组织他们做了一场小游戏,游戏规则如下:1、80名学生平均分成8组,排成8列,统一面向讲台做好;2、主持人向每组的最后一名队员提供一个数字(数字一般为3位或4位数,不确定&am…

德勤2022技术趋势:IT自我颠覆、技术跨界融合创新

作者 | 宋慧 出品 | CSDN云计算 IT 技术,一直处于快速发展与变化中。 基于对前沿技术的观察分析与自身实践,国际机构德勤管理咨询每年发布对于未来 18-24 个月的的重要技术趋势。2021 年 CSDN 曾报道 德勤2021技术趋势:繁琐、点状的匠人AI时…

ios yarn 如何配置_vuejs axios安装配置与使用

1.安装服务npm install --save axios vue-axios2.在main.jsimport axios from axiosimport VueAxios from vue-axiosVue.use(VueAxios, axios)Vue.prototype.$http axios3.可以配置axios 域名前缀新建一个config文件|-- config.jsimport Env from ./env;let config {env: Env…

双11特刊|购物车实时显示到手价,看云原生内存数据库Tair如何提升用户体验?

阿里云自研内存数据库Tair诞生于2009年,是一种支持高并发低延迟访问的云原生内存数据库,完全兼容Redis,已历经多年双11大促考验,提供核心在线访问加速能力,显著提升系统吞吐量。 作为双11大促承载流量洪峰的利器&…

Dubbo-Admin 正式支持 3.0 服务治理

简介:Dubbo 相信大家并不陌生,是一款微服务开发框架,它提供了 RPC 通信与微服务治理两大关键能力。大家在日常开发中更多使用的是 Dubbo 提供的 RPC 通信这一部分能力,而对其提供的服务治理的能力使用相对少一些,本文的…

vue将文本渲染html,vue2.0 之文本渲染-v-html、v-text

vue2.0 之文本渲染-v-html、v-text1、index.html代码vuedemo2、main.js代码import Vue from ‘vue‘import App from ‘./App‘Vue.config.productionTip false/* eslint-disable no-new */new Vue({el: ‘#app‘,render: h > h(App)})render: h > h(App)是ES6的语法&am…

ajax post 没有返回_Ajax异步技术之三:jQuery中的ajax学习

jQuery中的Ajax学习:jQuery是js的一个轻量型框架,已经将js创建的操作进行了封装,而ajax也是js的一部分,所以jQuery也已经将ajax进行了封装。封装:$.get(url,data,fn) url:请求地址data:请求参数,参数格式为…

如何成为真正的数字化企业,锐捷网络发布数字原力觉醒计划

编辑 | 宋慧 出品 | CSDN 云计算 什么样的企业可称为数字化企业? 因为疫情等各类不确定因素,数字化的浪潮正深刻改变着企业。所有企业都需考虑转型、创新、增长,这三个问题。深耕中国企业级市场多年的IT技术厂商锐捷网络,以“点线…

2021中国数字服务大会 | 阿里云混合云新一代运维演进与实践

简介:12月3日,2021中国数字服务大会顺利召开,大会以“数字服务、跨界融合、协同创新”为主题,邀请产学研界嘉宾,举办行业与学术论坛,共话数字服务的挑战和机遇。阿里云作为云厂商代表应邀参会,并…

html文字...点击后全部显示,js 文字超出部分隐藏、点击显示更多示例

这篇文章主要为大家详细介绍了js 文字超出部分隐藏、点击显示更多示例,具有一定的参考价值,可以用来参考一下。感兴趣js 文字超出部分隐藏、点击显示更多示例的小伙伴,下面一起跟随512笔记的小编罗X来看看吧。css:*{padding: 0;ma…

冲压模板自动标注LISP_干货满满!超实用冲压模具资料,加薪必看!

一般的冲压模具都是由:上下托板、上下垫脚、上下模座:一般用A3、Q235等“软料”做成,起支撑整个模具、方便架模、落料等作用。上、下模板:上、下模板起固定刀口、入块、入子、顶料销等作用,外定位、内定位、浮升引导销…

安谋科技四周年献礼,提前完成五年规划目标

自2018年4月正式独立运营以来,安谋科技一直以服务中国的科技产业、建设中国本土的研发能力、赋能中国本土半导体生态为核心使命。值此公司成立四周年之际,安谋科技宣布已提前超额完成了合资公司落地深圳时设立的五年规划目标。 回顾四年来走过的历程&am…

开源微服务编排框架:Netflix Conductor

简介:本文主要介绍netflix conductor的基本概念和主要运行机制。 作者 | 夜阳 来源 | 阿里技术公众号 本文主要介绍netflix conductor的基本概念和主要运行机制。 一 简介 netflix conductor是基于JAVA语言编写的开源流程引擎,用于架构基于微服务的流…

直播回顾:如何对付臭名昭著的 IO 夯?诊断利器来了 | 龙蜥技术

简介:听到IO夯总是让人头疼,那有没有可以分析IO夯问题的利器? 编者按:sysAK(system analyse kit),是龙蜥社区(OpenAnolis)系统运维 SIG 下面的一个开源项目,…