vue浏览器滚动加载更多
created () {
var that = this;
window.addEventListener('scroll',this.scroll,true)
console.log(this.$router)
this.getList();
},
destroyed () {
window.removeEventListener('scroll', this.scroll,true)
},
methods: {
scroll() {
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
var scrollHeight = document.body.scrollHeight;
console.log(scrollTop+windowHeight,scrollHeight)
if(scrollTop+windowHeight>=scrollHeight){ //测试浏览器有的时候相加 会出现小数点 这里用 >= 不用 ==
if(this.page <= this.totalPage) {
this.getList();
}
}
}
}
getList () {
this.page++;
if (this.isLoading) {
return;
}
if (this.page > this.totalPage) {
this.nomore = true;
return;
}
this.isLoading = true;
OrderService.getList(this, this.orderStatus, this.page, (data) => {
this.isLoading = false;
this.totalPage = data.data.totalPage;
for (var i = 0; i < data.data.datas.length; i++) {
this.list.push(data.data.datas[i]);
}
});
},
vue浏览器滚动加载更多的更多相关文章
- vue 原生添加滚动加载更多
vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱.我们在mounted建立滚动,destroyed销毁滚动. mounted () { window.addEven ...
- 笔记-VUE滚动加载更多数据
来源:https://blog.csdn.net/qq_17281881/article/details/87342403 VUE滚动加载更多数据 data() { return { loading: ...
- jquery weui ajax滚动加载更多
手机端使用jquery weui制作ajax滚动加载更多. 演示地址:http://wx.cnkfk.com/nuol/static/fpage.html 代码: <!DOCTYPE html& ...
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
- 【Vue.js】加载更多—vue-infinite-scroll
引言 今天用到了一个加载更多的插件,用起来很方便,插件的名字叫做vue-infinite-scroll 我们可以去npmjs.com官网看一下这个vue-infinite-scroll的用法,官网上面 ...
- vue 上滑加载更多
移动端网页的上滑加载更多,其实就是滑动+分页的实现. <template> <div> <p class="footer-text">--{{f ...
- Vue无限滚动加载数据
Web项目经常会用到下拉滚动加载数据的功能,今天就来种草Vue-infinite-loading 这个插件,讲解一下使用方法! 第一步:安装 npm install vue-infinite-load ...
- vue项目上滑滚动加载更多&下拉刷新
上滑滚动时获取内容高度.屏幕高度和滚动高度(此处#sslist要为内容是id) 内容高度 let innerHeight = document.querySelector("#sslist ...
- Vue 无限滚动加载指令
也不存在什么加载咯, 就是一个判断滚动条是否到达浏览器底部了. 如果到了就触发事件,米到就不处理. 计算公式提简单的 底部等于(0) = 滚动条高度 - 滚动条顶部距离 - 可视高度. 反正结 ...
随机推荐
- 如何执行Python代码
1.在linux系统中执行代码有两种方法 a.在脚本的当前目录下执行:python test.py b.给脚本赋予可执行权限,然后执行代码 chmod +x test.py test.py 2.在wi ...
- VM下如何装虚拟机?
1.打开VM,点击创建新的虚拟机 2.选择典型,点击下一步 3.选择下载好的iso文件,如下: 4.输入如下参数,点击下一步:
- 转载:python list和set的性能比较+两者转换
两者性能比较(转自http://www.linuxidc.com/Linux/2012-07/66404.htm) 本来是知道在Python中使用Set是比较高效,但是没想到竟然有这么大的差距: ~$ ...
- PythonStudy——元组 Tuple
元组类型 元组:可以理解为不可变的列表1.值可以为任意类型2.可以存放多个值 - 可以进行成员运算3.可以存放重复的值 - 可以计算成员出现的次数4.有序存储 - 可以通过索引取值,可以切片 常用操作 ...
- Spring Boot/Spring Cloud
104.什么是 spring boot? 在Spring框架这个大家族中,产生了很多衍生框架,比如 Spring.SpringMvc框架等,Spring的核心内容在于控制反转(IOC) ...
- 2017第45周一java多线程创建方法
1. 从JDK1.5开始,Java提供了3种方式来创建,启动多线程: Ø 继承Thread类来创建线程类,重写run()方法作为线程执行体. Ø 实现Runnable接口来创建线程类,重写run()方 ...
- SVN简单使用
如果是window操作系统,默认安装.右键菜单就会有显示SVN 如果已经配置好SVN,直接确定既可以检出. 如果没有配置,那么会显示下面的验证: 输入用户名和密码即可
- golang垃圾回收和SetFinalizer
golang自带内存回收机制--GC.GC通过独立的进程执行,它会搜索不再使用的变量,并释放.需要注意的是,进行GC会占用机器资源. GC是自动进行的.如果要手动进行GC,可以调用runtime.GC ...
- mysql:设置字符集utf8mb4 支持emoji字符
为什么要把数据库的字符集设置成utf8mb4呢?以前一直用的都是utf8啊? 答案在这里:utf8适用于不使用移动设备的互联网交互,utf8mb4适用于当前的移动设备互联网开发,因为移动设备中常常会有 ...
- [UE4]Dynamic Entry Box
Dynamic Entry Box:条目创建容器 一个特殊的容器,能够自动创建条目,在可变数量条目的时候,但是又不值得创建一个ListView或者Tile View. 注意: Dynamic Entr ...