mounted() {
 监听滚动条
      this.$refs.scrollbar.wrap.addEventListener("scroll", this.scrollContent,true)
    },
 
scrollContent(e){
// console.log(document.getElementsByClassName('is-scrolling-left')[0].scrollTop) 获取滚动条的高度
        let poor=e.target.scrollHeight - e.target.clientHeight
        if( poor == parseInt(e.target.scrollTop) || poor == Math.ceil(e.target.scrollTop) || poor == Math.floor(e.target.scrollTop) ){
 
    防止多次滚动加载
            this.isLoading?'':this.addPage()
        }
      },
      getList(){
        let params={
          isPage:1,
          currentPage:this.currentPage,
          pageSize:50,
          companyId:this.searchform.companyId,
          code:this.searchform.code,
        }
        this.$http.get(maintainRecord.findMaintainOrderList, params)
          .then(response => {
            // console.log(this.maintainList,response.list)
            // this.maintainList.push(response.list)
            this.maintainList=[...this.maintainList,...response.list]
            this.searchform.total = response.total
            this.$forceUpdate()
            this.$nextTick(()=>{
              this.isLoading=false
            })
            // this.clickedIndex = null
            // this.clickedWorkIndex = null
            // this.workList = []
            // this.workForm = {}
            // this.logForm = {}
            // this.goodsList = []
            // this.contentsList = []
          })
      },
      addPage(){
        this.isLoading=true
        if(this.searchform.currentPage*this.searchform.pageSize<this.searchform.total){
          this.currentPage=this.currentPage+1
          this.getList()
        }else{
          this.isLoading=false
        }
        
      },

el-scrollbar滚动加载的更多相关文章

  1. Vue滚动加载自定义指令

    用Vue在移动端做滚动加载,使用mint-ui框架, InfiniteScroll指令loadmore组件,在uc浏览器和qq浏览器都无法触发.无奈我只能自己写了. 决定用vue 的自定义指令 写滚动 ...

  2. 在element-ui的select下拉框加上滚动加载

    在项目中,我们需要运用到很多来自后端返回的数据.有时是上百条,有时甚至上千条.如果加上后端的多表查询或者数据量过大,这就导致在前端的显示就会及其慢,特别是在网络不好的时候更是如此. 自然,后端就做了一 ...

  3. HTML5商城开发一 楼层滚动加载数据

    对于楼层加载在以前只是个想法,从来没实现过,刚好项目中碰到,再此总结一下 场景:HTML5,局部商品列表信息滚动(局部滚动条) 1.通过jq设置subCategoryScroll的高度为屏幕显示高度( ...

  4. js 滚动加载iframe框中内容

    var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest; //滚动加载 var scrollLoad =function( ...

  5. [转] Jquery滚动加载

    原文地址:http://hi.baidu.com/vipxiaofan/item/9eb927b795671f77254b0985 另外一个asp.net的例子:http://blog.csdn.ne ...

  6. js滚动加载小插件

    本文实例讲述了jquery滚动加载数据的方法.分享给大家供大家参考.具体分析如下: 少废话直接上代码!!!粗暴,直接,干脆 0//lk-2017-05-04 1(function($, win) { ...

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

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

  8. 记录WEUI中滚动加载的一个BUG

    最近写微信公众号,用到的技术栈是jq+vue的混合开发,采用的UI是移动端比较火的WEUI,在微信开发中应该较广泛.个人看惯了elementUI文档,相对于饿了么组件文档的详细,WEUI的文档还是比较 ...

  9. 兼容IE8,滚动加载下一页

    // 滚动加载下一页         var nowScrolledHeight = document.documentElement.scrollTop || document.body.scrol ...

  10. vue2.0无限滚动加载数据插件

      做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装: ...

随机推荐

  1. npm 启动项目报错 Cannot find module '\@babel\compat-data\data\corejs3-shipped-proposals',解决办法

    最近升级了系统的node ,webpack 等等,然后今天打开项目,突然启动不起来了~~ 报错信息如下: Module build failed (from ./node_modules/babel- ...

  2. 前后端分离——使用OSS

    1. 第一步:编写OSS的工具类 点击查看代码 aliyun: oss: keyid: 填写自己的 keysecret: 填写自己的 endpoint: 填写自己的 bucketname: 填写自己的 ...

  3. 从零写一个兼容MySQL/Oracle的Proxy中件间(一)《初识Oracle的通信协议》

    0.前言 MySQL由于开源的原因,有各式各样的中件间Proxy ,极大的丰富了做高可用或迁移的方案,习惯了MySQL生态圈的灵活和便利,Oracle官方不开源代码和协议,没有中间件proxy,显得很 ...

  4. Blazor入门100天 : 身份验证和授权 (2) - 角色/组件/特性/过程逻辑

    目录 建立默认带身份验证 Blazor 程序 `角色/组件/特性/过程逻辑 DB 改 Sqlite 将自定义字段添加到用户表 脚手架拉取IDS文件,本地化资源 freesql 生成实体类,freesq ...

  5. Git【初次提交内容(代码)到新创建的远端仓库】

    哈喽大家好,转眼到了年后了.年都过完了,就要开始工作了啊.那今天给大家带来的是(题目).因为从实习期开始,就一直用SVN,即使是使用Git的时候,也用了Sourcetree工具.直到最近打算和朋友(兮 ...

  6. 财务精度:BigInteger 与 BigDecimal

    财务精度:BigInteger 与 BigDecimal 每博一文案 师父说: 人这一辈子,真地好难. 有些人,好着好着,忽然就变陌生了,有些手,牵着牵着,瞬间就放开了,有些路,走着走着,就失去了方向 ...

  7. 基于NOSTR协议的“公有制”版本的Twitter,去中心化社交软件Damus用后感,一个极端走向另一个极端

    最近,一个幽灵,Web3的幽灵,在网络游荡,它叫Damus,这玩意诠释了什么叫做病毒式营销,滑稽的是,一个Web3产品却在Web2的产品链上疯狂传销,各方大佬纷纷为其背书,到底发生了什么?Damus的 ...

  8. 定时调度插件------Sundial

    1 插件概述 开源链接:https://gitee.com/dotnetchina/Sundial 作者:百小僧 版本:2.5.6 2 使用方式 2.1 安装 nuget :搜索Sundial或使用命 ...

  9. try...catch中finally子句的使用

    目录: finally的使用 finally面试题 final.finally.finalize的区别 finally子句的使用: 1.在finally子句中的代码是最后且一定会执行的,即使try语句 ...

  10. JZOJ 2020.02.16【NOIP提高组】模拟A 组

    2020.02.16[NOIP提高组]模拟A 组 呼呼呼呼呼呼呼呼 今天暴力分可真多啊 第一次 \(A\) 组进前 \(5\) ! 呼呼呼呼呼呼呼呼 总有人虐场,总有人在场中被虐······ 总结 3 ...