首页 > 其他分享 >div滚动加载数据

div滚动加载数据

时间:2024-01-11 16:12:08浏览次数:29  
标签:pageN 滚动 res clientHeight onScroll let div data 加载

<template>
<div style="border:1px solid #ccc;max-height:280px;width:100%;overflow-y: auto;"
  v-if="recordList.length > 0"
  @scroll="onScroll">
  <div v-for="(item, index) in recordList"
    :key="index"
    style="display:flex;margin-bottom:10px">
    <div >{{ item.name}}</div>
  </div>
</div>
</template>
export default {
  data() {
     return {
      pageN: 1,
       pageS: 10,
       pages: 0, // 共几页
    }
  },
  mounted() {
        window.addEventListener('scroll', this.onScroll, true)
    },
  methods:{
   getListData() {
    let data = {
      pageNum: this.pageN,
      pageSize: this.pageS
    }
    this.$get('请求数据', data)
      .then(res => {
        if (res.status === 200) {
          this.pages = res.data.pages
            if (this.pageN <= 1) {
              this.recordList = res.data.list
            } else if (this.pages > 1) {
              this.recordList = this.recordList.concat(
                res.data.list
               )
            }
        }
      })
      .catch(err => {
        this.$message.error(err.message)
      })
        },
        onScroll(e) {
            let scrollTop = e.target.scrollTop
            let clientHeight = e.target.clientHeight
            let scrollHeight = e.target.scrollHeight
            if (scrollTop + clientHeight == scrollHeight) {
                this.pageN = this.pageN + 1
                if (this.pageN <= this.pages) {
                    this.getListData()
                }
            }
        }
  }
}    

 

标签:pageN,滚动,res,clientHeight,onScroll,let,div,data,加载
From: https://www.cnblogs.com/yjd-05/p/17958798

相关文章

  • 基于k8s Deployment的弹性扩缩容及滚动发布机制详解
    k8s第一个重要设计思想:控制器模式。k8s里第一个控制器模式的完整实现:Deployment。它实现了k8s一大重要功能:Pod的“水平扩展/收缩”(horizontalscalingout/in)。该功能从PaaS时代开始就是一个平台级项目必备编排能力。若你更新了Deployment的Pod模板(如修改容器的镜像),则Deployment......
  • react 横向文字滚动动画 ,及纵向文字滚动动画带有间歇时间 交替渐变显示文字动画
    水平滚动demo.less#scroll_x{ width:300px; height:30px; background-color:#ccc; color:green; position:relative; overflow:hidden;}#scroll_x_text{ font-size:20px; position:absolute; white-space:nowrap; word-wrap:norm......
  • 加载动态库onnxruntime
    publicstaticIntPtrOnnxRuntimeImportResolver(stringlibraryName,Assemblyassembly,DllImportSearchPath?searchPath){//调试信息LogHelper.NlogTrace(libraryName);if(libraryName!="onnxruntime")......
  • SpringBoot配置加载优先级
    优先级:命令行参数>环境变量>配置文件1.命令行参数配置java-jar-Dserver.port=8000ruoyi-admin.jar2.环境变量配置linux系统环境:#申明环境变量exportSERVER_PORT=10000#执行jar包java-jardemo.jarwindow系统环境:idea中:java-jar命令使用环境变量需要再win系统环境变量中......
  • 滚动知识点
    functionpageChange(){//...页面滚动时,须要作的事情}window.addEventListener("scroll",pageChange,false);一、使用 window.addEventListener 和 document.addEventListener 来处理页面上的事件,区别仅仅在于:不一样事件模型上,处理的顺序不同。浏览器捕获,window......
  • Android——Glide加载网络图片
    Glide是谷歌开发的图片加载框架,也是Android官方推荐的图片加载框架。  使用Glide之前需要先导入glide库:implementation'com.github.bumptech.glide:glide:4.13.0‘  Glide的用法很简单,只需一行代码即可将网络图片加载到图像视图界面:Glide.with(活动实例).load(网址字符......
  • Threejs——十四、关于深度冲突、重叠、以及加载模型进度条效果实现(附完整代码)
    深度冲突两个模型重叠的模型,通过浏览器旋转预览,会发现模型旋转的时候会发生闪烁。这种情况,主要是两个模型重合,电脑分不清谁在前谁在后,这种情况,可以理解为深度冲突Z-fighting。functionaddBox(){constgeometry=newTHREE.BoxGeometry(10,10,10);//材质constmater......
  • slf4j+logback源码加载流程解析
    slf4j绑定logback源码解析Loggerlog=LoggerFactory.getLogger(LogbackDemo.class);如上述代码所示,在项目中通常会这样创建一个Logger对象去打印日志。然后点进去,会走到LoggerFactory的getILoggerFactory()方法,如下代码所示。publicstaticILoggerFactorygetILoggerFactory()......
  • mac下appium定位元素检察器会话在启动会话后,界面一直在加载中
    1.检查Appium服务器是否正常运行,可以在终端中输入appium查看是否正常启动;2.检查手机是否正常连接,可以在终端中输入idevice_id-l查看是否有设备连接;3.检查Appium服务器和手机之间的连接,可以在终端中输入ideviceinfo-u<device_udid>查看是否有设备连接;4.检查Appium服务器......
  • Android多行横向来回自动滚动
    使用自定义RecyclerView实现,先看效果,能用得上的再继续往下看……上代码~自定义AutoRollRecyclerView,继承RecyclerView,重点只有这一个类classAutoRollRecyclerView@JvmOverloadsconstructor(context:Context,attrs:AttributeSet?=null):RecyclerView(context,a......