zoukankan      html  css  js  c++  java
  • 监听dom是否滚动到底部

    HTML:
    <div class="data-box" ref="companyBox"> <el-row id="companyData" v-loading="companyLoading" element-loading-background="rgba(0, 0, 0, 0.5)" element-loading-spinner="el-icon-loading" element-loading-text="加载中..." style="min-height: 64px" > <div v-if="empty" class="empty">暂无数据</div> <div class="company" :class="{active: item.active}" v-for="(item, index) in companyList" :key="item.jgztId" @click="showDetail(item, 'company')"> <span class="point"></span>{{index}}-{{item.compName}} </div> </el-row> </div> js: const dataDom = document.getElementById('companyData'); this.box = this.$refs.companyBox; // 监听这个dom的scroll事件 this.box.onscroll = () => { //卷上去的高度+容器高度=滚动区域高度时 到底部 if (this.box.scrollTop + this.box.clientHeight === dataDom.clientHeight) { this.companyParams = { ...this.companyParams, page: ++this.companyParams.page }; this.updateCompanyList() } } css .data-box { overflow-y: scroll; height: calc(100vh - 300px); }

    实现web端,滚动到底部下拉加载刷新的功能

  • 相关阅读:
    JS练习
    推断一组数的规律,并填充缺失的数
    IP地址的正则表达式写法
    相比于HTML4,HTML5废弃的元素有哪些?
    关于HTML5和CSS3的几个“新增”
    hdu 3092 简单数论+分组背包dp
    避障
    人工势场法
    A*
    pop 2049-简单bfs
  • 原文地址:https://www.cnblogs.com/abigting/p/13786759.html
Copyright © 2011-2022 走看看