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. Java 进阶P-6.4+P-6.5

    狐狸和兔子 狐狸和兔子都有年龄 当年龄到了一定的上限就会自然死亡 狐狸可以随即决定在周围的兔子中吃一个 狐狸和兔子可以随即决定生一个小的,放在旁边的空的格子里 如果不吃也不生,狐狸和兔子可以随机决定走 ...

  2. LeetCode_1. 两数之和

    写在前面 难度:简单 原文链接:https://leetcode-cn.com/problems/two-sum/ 题目  给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和 ...

  3. GitLab CI-CD 学习笔记

    概述 1. CI/CD CI(持续集成)指开发人员一天内进行多次合并和提交代码操作,并通过自动化测试,完成构建 CD(持续部署)指每次代码更改都会自动部署到对应环境 CI/CD 结合在一起,可以加快开 ...

  4. CentOS7 登录到控制台后无法联网

    登录到控制台, ping 不通网络 解决方法 通过命令找到网卡的配置文件见 ll /etc/sysconfig/network-scripts/ | grep ifcfg-en 编辑配置文件 vi i ...

  5. Syntax Error: Error: Cannot find module ‘node-sass‘

    出现问题原因: vscode运行前端项目输入npm run dev命令触发此错误 解决办法: 指定淘宝镜像安装node-sass win+r 打开cmd控制台输入 npm install -g cnp ...

  6. LG P3768 简单的数学题

    \(\text{Problem}\) 求 \[\left(\sum_{i=1}^n \sum_{j=1}^n i j \gcd(i,j)\right) \bmod p \] \(n \le 10^{1 ...

  7. ASAS-CoMoSpA研究: 评价SpA不同分类标准的表现

    ASAS-CoMoSpA研究: 评价SpA不同分类标准的表现 EULAR2015; PresentID: OP0037 THE PERFORMANCE OF DIFFERENT CLASSIFICAT ...

  8. js根据某个字段进行分组

    分组前数据: [ {"f1":"q","f2":"w","f3":"e",&qu ...

  9. Prometheus安装部署(主体)

    Prometheus安装部署 一,下载安装包并解压 下载地址:https://github.com/prometheus/prometheus/releases 因为服务器上下载速度太慢,所以可以提前 ...

  10. Error in created hook: "TypeError: Cannot read properties of undefined (reading 'get')"

    写Vue 的时候常遇到的错误之一就是XXXXXX未定义,然后来一个undefined这种问题一般都是创建钩子出错:无法读取未定义的 xxx 属性. 此错误一般多出现在 created() 中, Vue ...