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浏览器滚动加载更多的更多相关文章

  1. vue 原生添加滚动加载更多

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

  2. 笔记-VUE滚动加载更多数据

    来源:https://blog.csdn.net/qq_17281881/article/details/87342403 VUE滚动加载更多数据 data() { return { loading: ...

  3. jquery weui ajax滚动加载更多

    手机端使用jquery weui制作ajax滚动加载更多. 演示地址:http://wx.cnkfk.com/nuol/static/fpage.html 代码: <!DOCTYPE html& ...

  4. 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...

  5. 【Vue.js】加载更多—vue-infinite-scroll

    引言 今天用到了一个加载更多的插件,用起来很方便,插件的名字叫做vue-infinite-scroll 我们可以去npmjs.com官网看一下这个vue-infinite-scroll的用法,官网上面 ...

  6. vue 上滑加载更多

    移动端网页的上滑加载更多,其实就是滑动+分页的实现. <template> <div> <p class="footer-text">--{{f ...

  7. Vue无限滚动加载数据

    Web项目经常会用到下拉滚动加载数据的功能,今天就来种草Vue-infinite-loading 这个插件,讲解一下使用方法! 第一步:安装 npm install vue-infinite-load ...

  8. vue项目上滑滚动加载更多&下拉刷新

    上滑滚动时获取内容高度.屏幕高度和滚动高度(此处#sslist要为内容是id) 内容高度  let innerHeight = document.querySelector("#sslist ...

  9. Vue 无限滚动加载指令

    也不存在什么加载咯, 就是一个判断滚动条是否到达浏览器底部了. 如果到了就触发事件,米到就不处理. 计算公式提简单的   底部等于(0) =  滚动条高度 - 滚动条顶部距离 - 可视高度.  反正结 ...

随机推荐

  1. LINUX文件删除,但磁盘空间未释放

    最近在进行系统压测,由于服务器节点太多,便写了个简单的脚本,在执行过程中发现,日志文件删除后,磁盘空间只释放了一小部分,任有大部分磁盘空间未释放. 使用lsof | grep delete命令,发现已 ...

  2. Redis占硬盘空间

    转载自:http://blog.csdn.net/qq285744011/article/details/51002409 [问题的原因] Windows版Redis启动后,会在C盘自动创建一个很大的 ...

  3. 使用SURF::create()以后报错无法解析

    理论上,如果在cmake中勾选了Build_opencv_world.OPENCV_ENABLE_NONFREE以及选择了OPENCV_EXTRA_MODULES_PATH三项后,再编译INSTALL ...

  4. 菜鸟Vue学习笔记(二)

    上一篇文章跟大家分享了Vue笔记上半部分,这篇文章接着跟大家分享.最近学习Vue越来越顺利了,今天接着学习,接着记录. 首先,来学习下常用的v-bind属性,它的作用是在属性中使用vue中定义的变量的 ...

  5. 谈谈 ServerFul 架构

    我写了一篇文章 <自己实现一个线程池>  https://www.cnblogs.com/KSongKing/p/9803935.html , 其实 不仅仅 是 线程池, 中间件 层 的 ...

  6. Excel技巧--按内容分列与合并

    上表的A列,如果想要按横线分隔开多列,复制粘贴很麻烦,可以使用“数据”-->“分列”来分隔开: 1.选择A列,在A列后预先插入三列空列.点击“数据”—>“分列”,对话框选择按“分隔符号”分 ...

  7. WebApi 序列化 循环引用问题

    public static void Register(HttpConfiguration config) { // Web API 配置和服务 config.Formatters.Remove(co ...

  8. 使用pageoffice进行多个文档的合并

    提前给test模板文件中 手动插入一个书签,因为pageoffice必须有一个书签后,才能在后台进行书签的创建 //多个word文件进行合并 string strCopyFolder = System ...

  9. 理解OpenShift(2):网络之 DNS(域名服务)

    理解OpenShift(1):网络之 Router 和 Route 理解OpenShift(2):网络之 DNS(域名服务) 理解OpenShift(3):网络之 SDN 理解OpenShift(4) ...

  10. centos7安装 owncloud注意事项

    要关于selinux 用来存放文件的目录权限要修改 chown -R apache:apache my.cnf里的binlog_format=mixed前面的注释去掉,不然报mysql错!