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. flutter Error:Cannot run with sound null safety, because the following dependencies don't support

    学习flutter新版本的路上,真的是一天一个新惊喜啊 今天遇到的坑是 Flutter 升级高版本后,运行和build 报错 Error: Cannot run with sound null saf ...

  2. ES中的内置对象--jquery如何优化代码,少用$进行查找,减少查找次数的方法

  3. Object类中wait带参方法和notifyAll方法-线程间通信

    Object类中wait带参方法和notifyAll方法 void wait (在其他线程调用此对象的notify()方法或notifyAll()方法前,导致当前线程等待.void wait  (lo ...

  4. 【随笔记】SiliconLabs Android Demo 编译

    AndroidStudio:3.5.2 AndroidPhone:XiaoMi5 (Android 8.0) AndroidDemo:3.1.4-44 AndroidDemo 源码路径:Simplic ...

  5. elk引入redis

    1.引入日志依赖 <dependency> <groupId>com.cwbase</groupId> <artifactId>logback-redi ...

  6. spring-security 解决

    引入依赖 <dependency> <groupId>org.springframework.security</groupId> <artifactId&g ...

  7. 计算机网络基础05-Web应用

    1 Web最重要的构成基础 网页 网页互相连接 1.1 网页 网页包含多个对象 对象:HTML文件.图片文件.视频文件.动态脚本等 基本HTML文件:包含对其它对象引用的连接 1.2 对象的寻址 UR ...

  8. 4.12 疫情数据可视化 毕设(初稿版 crud+可视化echarts

    4.22 完成地图 数据可视化~~~  599x150 解决不显示图片的问题 参考文档 https://blog.csdn.net/qq_51917985/article/details/121380 ...

  9. Cesium用wsad进行场景漫游(九)

    2023-01-14 先看效果,wsadqe控制方向升降,鼠标拖动屏幕也可以控制方向 整理下思路: 1. 使用movement变量控制是否进行漫游 2.1 进行漫游则先将enableRotate等全部 ...

  10. [NOI Online 2022 提高组] 如何正确地排序

    \(\text{Solution}\) 当 \(m=2\) 时,\(ans=2n\sum a_{i,j}\) 当 \(m=3\) 时 当然先套路地考虑某一行的贡献,记为第 \(x\) 行 则当取 \( ...