1. created () {
  2. var that = this;
  3. window.addEventListener('scroll',this.scroll,true)
  4. console.log(this.$router)
  5. this.getList();
  6. },
  7. destroyed () {
  8. window.removeEventListener('scroll', this.scroll,true)
  9. },
  10. methods: {
  11. scroll() {
  12. var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
  13. var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
  14. var scrollHeight = document.body.scrollHeight;
  15. console.log(scrollTop+windowHeight,scrollHeight)
  16. if(scrollTop+windowHeight>=scrollHeight){  //测试浏览器有的时候相加 会出现小数点 这里用 >= 不用 ==
  17. if(this.page <= this.totalPage) {
  18. this.getList();
  19. }
  20. }
  21. }
  22. }
  1. getList () {
  2. this.page++;
  3. if (this.isLoading) {
  4. return;
  5. }
  6. if (this.page > this.totalPage) {
  7. this.nomore = true;
  8. return;
  9. }
  10. this.isLoading = true;
  11. OrderService.getList(this, this.orderStatus, this.page, (data) => {
  12. this.isLoading = false;
  13. this.totalPage = data.data.totalPage;
  14. for (var i = 0; i < data.data.datas.length; i++) {
  15. this.list.push(data.data.datas[i]);
  16. }
  17. });
  18. },

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. 如何理解Minkowski不等式

    [转载请注明出处]http://www.cnblogs.com/mashiqi 2017/02/16 Minkowski不等式: 设$f$是$\mathbb{R}^n \times \mathbb{R ...

  2. scrapy中selenium的应用

    引入 在通过scrapy框架进行某些网站数据爬取的时候,往往会碰到页面动态数据加载的情况发生,如果直接使用scrapy对其url发请求,是绝对获取不到那部分动态加载出来的数据值.但是通过观察我们会发现 ...

  3. “轻量级JavaEE”之新学期目标

    我以后的职业目标是做一名Java开发工程师.之前学了一些JAVA的基础知识,也学了一些C,但以现在的知识储备和实战能力是不能胜任企业开发实战的要求的,所以这门“轻量级JavaEE企业应用实战”对我的提 ...

  4. 磁盘操作系统 cmd命令

    DOS CMD :磁盘操作系统 不区分大小写 **cd \ 根目录 cls 清空屏幕 dir 显示目录 d: 进入D盘 cd 进入目录命令 dir 查看当前目录的文件与目录 del 删除文件 del ...

  5. ex_BSGS

    //author Eterna #define Hello the_cruel_world! #pragma GCC optimize(2) #include<iostream> #inc ...

  6. 中国商用分组密码SM4

    SM4 密码算法结构 SM4 密码算法基本运算有两部分: 1.模2加:⊕,32比特异或运算 2.循环移位: <<< i ,把32位字循环左移i位 基本密码部件为 1非线性字节变换S盒 ...

  7. js 功能

    ---IE wps excelApp =ActiveXObject("Excel.Application") App.DisplayAlerts = false 不显示警告 App ...

  8. POJ1738 An old Stone Game

    题意 Language:Default An old Stone Game Time Limit: 5000MS Memory Limit: 30000K Total Submissions: 439 ...

  9. CSVN配置自动备份策略

    在浏览器中登录CSVN管理页面,登录地址就是ip:3343,版本库->backup schedule ,选择type of job(备份类型),when to run(备份频率和时间),numb ...

  10. 定时重启tomcat

    写个简单的定时重启,弄了一上午,主要是crontab里面奇怪 #!/bin/bash p=`ps -ef |grep tomcat |head -n 1|awk -F" " '{p ...