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) = 滚动条高度 - 滚动条顶部距离 - 可视高度. 反正结 ...
随机推荐
- 在Struts.xml中的result元素指的是:指定动作类的动作方法执行完后的结果视图.
result结果集 上一篇文章主要讲Struts2框架(4)---Action类访问servlet这篇主要讲result结果集 在Struts.xml中的result元素指的是:指定动作类的动作方法执 ...
- day08 学习小测试 九九乘法表 车牌划分计算 大文件读取操作
1.1需求:读取一个100G的文件,检测文件中是否有关键字keys=['苍老师','小泽老师',"alex"], 如果有则替换成"***",并写入到另一个文件中 ...
- Redis占硬盘空间
转载自:http://blog.csdn.net/qq285744011/article/details/51002409 [问题的原因] Windows版Redis启动后,会在C盘自动创建一个很大的 ...
- 自己写一个 Hash 表
项目地址: https://github.com/kelin-xycs/HashTableLib 为什么会想要自己写一个 Hash 表, 以前也想过 Hash 表 的 原理, 觉得很神奇, 不过最近 ...
- asp.net core 基于角色的认证登陆
一.登陆页面的Controller [Authorize(Roles = "Admin,SuperAdmin")] public class ManageController : ...
- Spring Cloud(Dalston.SR5)--Zuul 网关-Hystrix 回退
当我们对网关进行配置让其调用集群的服务时,将会执行 Ribbon 路由过滤器,该过滤器在进行转发时会封装为一个 Hystrix 命令予以执行,Hystrix 命令具有容错的功能,如果"源服务 ...
- write(6)、write(10)和write(16)以及read(6)、read(10)和read(16)的区别与应用
大家知道,我们读写硬盘的时候发送的命令为SCSI READ或SCSI WRITE.即SCSI读和SCSI写命令.但是READ和WRITE有很多种,这些命令的应用场合是什么呢? 最重要的一点就是,这是跟 ...
- nodejs教程 安装express及配置app.js文件的详细步骤
来自:http://www.jb51.net/article/36710.htm express.js是nodejs的一个MVC开发框架,并且支持jade等多种模板.下面简单来说说express的 ...
- 【C++】atof()
转自:https://blog.csdn.net/zhaoyl03/article/details/8176387 atof 是ascII to float的缩写,它将ascII字符串转换为相应的单精 ...
- CentOS 7安装WordPress
在开始本文前,我假定你已经安装好了nginx.php-fpm和mariaDB(或mysql).它们的安装过程可参考我以前的文章. 1. 安装EPEL(Extra Packages for Enterp ...