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. 基于windows系统使用GNVM进行node切换版本

    GNVM是什么? GNVM 是一个简单的 Windows 下 Node.js 多版本管理器,类似的 nvm nvmw nodist . 安装 进入官网,下载你所需要的包,直达链接 下载完成 放到我们的 ...

  2. Array.from() ------来自❀ 前端宇宙 ❀公众号。

    JavaScript 中有一个这样的函数: Array.from:允许在 JavaScript 集合(如: 数组.类数组对象.或者是字符串.map .set 等可迭代对象) 上进行有用的转换. 1. ...

  3. 使用ng-zorro图标库出现the icon redo-o does not exist or is not registered.

    出现这种情况一般是因为没导入你要的图标 可以在项目目录找到这个文件  src\style-icons-auto.ts 然后打开,导入导出里加上你要导入的图标....  就可以了 如果你不知道要怎么加 ...

  4. 【Azure Cache for Redis】Python Djange-Redis连接Azure Redis服务遇上(104, 'Connection reset by peer')

    问题描述 使用Python连接Azure Redis服务,因为在代码中使用的是Djange-redis组件,所以通过如下的配置连接到Azure Redis服务: CACHES = { "de ...

  5. 虚拟机配置代理(虚拟机nat)

    桥接 ​ 第一步:打开clash allow lan ​ 第二步:找到宿主机在局域网中的IP地址 ​ 第三步:配置虚拟机代理 NAT ​ 同上 注意 ​ 一.宿主机防火墙要配置好(直接关闭会也有效果, ...

  6. C-06\数组

    一.一维数组 数组:表示同类数据的集合(业务功能一致且数据类型一样) []: ​ 定义时,表示数组身份与标志,其中数值表示数组元素的总个数 ​ 定义以外使用时,表示下标运算,下标运算有两个操作符:指针 ...

  7. 解决org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)问题

    解决org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)问题 需要检查的步骤: 1.是否map ...

  8. Vue09 事件

    1 事件语法 Vue 中的事件绑定可以使用 v-on 指令进行处理,可以把 v-on 绑定事件简写为 @. <div id="root"> <button @cl ...

  9. .Net Framework创建grpc

    1.环境要求 .Net Framework 4.8 .Net Core 版本: https://www.cnblogs.com/dennisdong/p/17120990.html 2.Stub和Pr ...

  10. JZOJ 4744.同余

    \(\text{Problem}\) \(\text{Solution}\) 考虑 \(60\) 分 设 \(f_{i,j,k}\) 表示前 \(i\) 个数,模 \(j\) 同余 \(k\) 的个数 ...