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端,滚动到底部下拉加载刷新的功能

  • 相关阅读:
    牛客小白月赛29 种树 题解(思维)
    E
    D
    方格取数(number) 题解(dp)
    csust T1097 “是时候表演真正的技术了” 题解(虚点跑最短路)
    poj 2352 Stars
    poj 3321 Apple Tree
    poj 3067 Japan
    poj 1195 Mobile phones
    poj 2155 Matrix
  • 原文地址:https://www.cnblogs.com/abigting/p/13786759.html
Copyright © 2011-2022 走看看