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() // 加载的列表数据
}
}
vue 原生添加滚动加载更多的更多相关文章
- 笔记-VUE滚动加载更多数据
来源:https://blog.csdn.net/qq_17281881/article/details/87342403 VUE滚动加载更多数据 data() { return { loading: ...
- Vue——轻松实现vue底部点击加载更多
前言 需求总是不断改变的,好吧,今天就把vue如何实现逐步加载更多和分布加载更多说下,默认你知道如何去请求数据的哈 一次请求 页面 使用slice来进行限制展现从0,a的数据 <div v-fo ...
- jquery weui ajax滚动加载更多
手机端使用jquery weui制作ajax滚动加载更多. 演示地址:http://wx.cnkfk.com/nuol/static/fpage.html 代码: <!DOCTYPE html& ...
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
- vue mpvue 上拉加载更多示例代码
vue 上拉加载更多示例代码 可以比较简单的改为 mpvue , 去除滚动判断,直接放在 onReachBottom 周期即可. html <div id="app"> ...
- vue项目上滑滚动加载更多&下拉刷新
上滑滚动时获取内容高度.屏幕高度和滚动高度(此处#sslist要为内容是id) 内容高度 let innerHeight = document.querySelector("#sslist ...
- Vue.js中滚动条加载更多数据
本文章参考:http://www.cnblogs.com/ssrsblogs/p/6108423.html 分析:1.需要判断滚动条是否到底部: 需要用到DOM的三个属性值,即scrollTop.cl ...
- 微信小程序实现滚动加载更多
1.需要用到的组件和api scroll-view(可滚动视图区域) wx.showToast(OBJECT)显示消息提示窗----显示loading小菊花用的 2.需要用到的属性 3.scrol-v ...
- vue+element ui 滚动加载
<div id="app"> <div class="infinite-list-wrapper" style="overflow: ...
随机推荐
- 百万年薪python之路 -- 软件的开发规范
一. 软件的开发规范 什么是开发规范?为什么要有开发规范呢? 你现在包括之前写的一些程序,所谓的'项目',都是在一个py文件下完成的,代码量撑死也就几百行,你认为没问题,挺好.但是真正的后端开发的项目 ...
- spring boot配置Servlet容器
Spring boot 默认使用Tomcat作为嵌入式Servlet容器,只需要引入spring-boot-start-web依赖,默认采用的Tomcat作为容器 01 定制和修改Servlet容器 ...
- 关于ESET占用CPU严重 的解决方案||ESET CPU 100%||用迅雷时ESET占用CPU(6月22日再次更新)
关于ESET占用CPU严重 的解决方案 本文根据原帖有适量删改. ESET 的杀毒软件历来以占用资源少,CPU消耗少著称,可是很多朋友(特别是中国大陆的朋友)反应ESS & EAV 间歇性占用 ...
- (二)与animation播放对比
animation播放动画 1.播放默认动画 直接将动画拖入动画对象animation组件的animation变量中,然后加入如下代码既可以播放(此处采用toggle控制动画的播放) public A ...
- Modbus协议笔记
读线圈:就是说读开关量输出的状态,看看开关量输出的到底是开着的还是关着的,这样说有点不专业,但是好明白.比如要在上位机显示开关量输出的当状态,就得用这个功能码. 写线圈:就是说读开关量输入的状态,开关 ...
- 过滤器、拦截器和AOP的分析与对比
目录 一.过滤器(Filter) 1.1 简介 1.2 应用场景 1.3 源码分析 二.拦截器(Interceptor) 2.1 简介 2.2 应用场景 2.2 源码分析 三.面向切面编程(AOP) ...
- 跑酷天堂C++小黑框版
上:跳跃 左右:行走 #include <bits/stdc++.h> #include <windows.h> #include <conio.h> using ...
- MinIO 搭建
MinIO 搭建 MinIO 是一个基于 Apache License v2.0 开源协议的对象存储服务.它兼容亚马逊 S3 云存储服务接口,非常适合于存储大容量非结构化的数据,例如图片.视频.日志文 ...
- NOIP模拟测试25
这次考试后面心态爆炸了...发现刚了2h的T2是假的之后就扔掉了,草率地打了个骗分 T1只会搜索和m=0 最先做的T3,主要是发现部分分很多,当时第一眼看上去有87分(眼瞎了). 后来想了想,感觉一条 ...
- Python文字转换语音,让你的文字会「说话」,抠脚大汉秒变撒娇萌妹
作者 | pk 哥 来源公众号 | Python知识圈(ID:PythonCircle) APP 也有文字转换为语音的功能,虽然听起来很别扭,但是基本能解决长辈们看不清文字或者眼睛疲劳,通过文字转换为 ...