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. 如何修剪git reflog历史

    背景: vscode插件git-graph可以方便查看git-commit-graph,效果很好,关键是交互性很好.点选任意commit即可预览提交内容,实在是太方便了,比我之前用命令行上git lo ...

  2. 断点调试/认证/权限/频率-源码分析/基于APIView编写分页/异常处理

    内容概要 断点调试 认证/权限/频率-源码分析 基于APIView编写分页 异常处理 断点调试 # 程序以 debug模式运行,可以在任意位置停下,查看当前情况下变量数据的变化情况 # pycharm ...

  3. EF Core DBFirst和CodeFirst 模式使用方法

    一.安装依赖包 1.Microsoft.EntityFrameworkCore 2.Microsoft.EntityFrameworkCore.Tools 3.Microsoft.EntityFram ...

  4. .net 字符串逗号隔开去重

    1.本文背景 同时输入/选择多条信息或批量输入/选择多条信息形成一个逗号隔开的字符串集,会出现数据重复的错误情况,产生不必要的脏数据,本文依次收集测试几种有效的去重方法. 2.代码实现 1)方法一:L ...

  5. ORACLE数据库起不来

    由于意外导致数据库无法启动 首先切换到oracle用户,查看profile文件. su - oracle cat .bash_profile 然后进入数据库,查看挂载上 sqlplus "/ ...

  6. Vue学习:实现用户没有登陆时,访问后自动跳转登录页面

    设计思路 定义路由的时候配置属性,这里使用needLogin标记访问页面是否需要登录 设置路由守卫,每个页面在跳转之前都要经过验证,校验用户信息是否存在,不存在跳转到登录页 用户登录后将用户信息存储在 ...

  7. linux nginx mysql php LNMP一键安装包

    官网: LNMP一键安装包 - CentOS/RadHat/Debian/Ubuntu下自动编译安装Nginx,PHP,MySQL,PHPMyAdmin 安装方法: centos 7.2安装 lnmp ...

  8. ES6中的class对象和它的家人们

    在ES6中新增了一个很重要的特性: class(类).作为一个在2015年就出了的特性, 相信很多小伙伴对class并不陌生.但是在日常开发中使用class的频率感觉并不高(可能仅限于作者),感觉对c ...

  9. 昇腾AI新技能,还能预防猪生病?

    摘要:日前,由华为与武汉伯生科技基于昇腾AI合作研发的"思符(SiFold)蛋白质结构预测平台"正式推出,并成功应用于国药集团动物保健股份有限公司的猪圆环病毒疫苗研发中. 本文分享 ...

  10. LeetCode-1765 地图中的最高点

    来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/map-of-highest-peak 题目描述 给你一个大小为 m x n 的整数矩阵 isWa ...