原生js 下拉刷新 +上拉加载_js 上拉加载-程序员宅基地

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    *{
        padding: 0;
        margin: 0;
    }
    html,body,.app{
      width: 100%;
      height: 100%;
    }
    .page{
        width: 100%;
        height: 100%;
    }
   .refreshTxt,.loadingTxt{
       width: 100%;
       height: 36px;
       line-height: 36px;
       text-align: center;
       background-color: gray;
       color: white;
       display: none;
    }
   
    </style>
</head>
<body>
<div class="app">
<div class="page">
<div class="container">
    <p class="refreshTxt">刷新中...</p>
    <div class="content">
        <ul class="list1">
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
           
        </ul>
    </div>
    <p class="loadingTxt">加载中...</p>
</div>
</div>
</div>

<script>
const html=document.documentElement
const refreshTxt=document.querySelector('.refreshTxt')
const loadingTxt=document.querySelector('.loadingTxt')
const list1=document.querySelector('.list1')

// 记录开始、结束触点和当前页码
let startPoint,endPoint,page=1

// 触摸开始监听
window.ontouchstart=(e)=>{
 startPoint=e.changedTouches[0]
}

// 触摸结束监听
window.ontouchend=(e)=>{
   endPoint=e.changedTouches[0]
   if(html.scrollTop===0 && 
   endPoint.screenY-startPoint.screenY>80 && 
   Math.abs(endPoint.screenX-startPoint.screenX)<20)
   {
     // 下拉触发
     refreshTxt.style.display='block'
     setTimeout(()=>{ 
        refreshTxt.style.display='none'
        location.reload()
    },2000)
   }
 
   // 如果要完全到底部的话不太好触发，时常不灵，所以将距离设置为小于10时触发
//    if(html.clientHeight+html.scrollTop===html.scrollHeight && startPoint.screenY-endPoint.screenY>30 && Math.abs(endPoint.screenX-startPoint.screenX)<20)
   if(html.scrollHeight-(html.clientHeight+html.scrollTop)<10 && 
   startPoint.screenY-endPoint.screenY>30 && 
   Math.abs(endPoint.screenX-startPoint.screenX)<20)
   {
     // 上拉触发
     setTimeout(()=>{ 
     loadingTxt.style.display='none'
     page++
     
     const newList=[]
     for(let i=0;i<10;i++){
        const li=document.createElement('li')
        li.innerText=page
        newList.push(li)
     }
     list1.append(...newList)
    },2000)
     loadingTxt.style.display='block'
     html.scrollTo(0,html.scrollHeight)
   }
}   

</script>
</body>
</html>

本文链接：https://blog.csdn.net/weixin_68903201/article/details/129183419

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

机器学习笔试面试超详细总结（二）_机器学习算法笔试-程序员宅基地

文章浏览阅读7.6k次，点赞5次，收藏74次。51、概率和信息量的关系52、数据清理中，缺失值的处理方法53、统计模式分类问题54、语言模型0概率问题55、逻辑回归和多元回归分析的不同56、关于Word2Vec57、词向量58、二次准则函数的H-K算法比感知器的优势59、卷积之后特征图谱的大小60、矩阵计算效率61、数据过大时，那种梯度下降方法更好62、选择神经网络深度时，需要考虑哪些参数63、如何利用已有训..._机器学习算法笔试

Unity3D Camera设置结合OpenGL详细解读_unity配合opengles-程序员宅基地

文章浏览阅读2.8k次，点赞3次，收藏5次。首先，总体概述。Unity里面的Camera是把渲染画面，最终呈现在屏幕上的最后一步操作。所有的渲染操作最终都要通过Camera在呈现。如果用OpenGL来实现，Camera做了一下几个事情。通过正交或是透视，剪裁平面，得到一个4x4的矩阵数据。这个矩阵就是，model-view-projection中的projection。所有物体的旋转R，平移T，缩放S，形成的矩阵数据_unity配合opengles

Python来计算 1，2，3，4 能组成多少个不相同且不重复的三位数？

我们今天的例子是有 1，2，3，4 四个数字，它们能组成多省个互不相同且无重复的三位数？都分别是多少？

理解CSS中的sticky与fixed定位

在CSS中，和是两种常见的定位方式，它们可以让元素脱离文档流，并具有固定位置的效果。然而，它们在实际应用中有着不同的特点和使用场景。

python：pycharm构建虚拟环境打包_pycharm虚拟环境打包-程序员宅基地

文章浏览阅读3.7k次。文章目录一、构建虚拟环境二、创建解释器三、添加所需模块四、打包一、构建虚拟环境1、打开终端2、进入指定路径cd D:\software\pycharm\project\other_venv3、创建虚拟环境（名称为excel）python -m venv excel二、创建解释器三、添加所需模块1、重新添加一个终端2、安装模块pip install xlrd==1.2.0 -i http://pypi.douban.com/simple --trusted-host pypi_pycharm虚拟环境打包

鸿蒙（HarmonyOS）性能优化实战-Trace使用教程

OpenHarmony的DFX子系统提供了为应用框架以及系统底座核心模块的性能打点能力，每一处打点即是一个Trace，其上附带了记录执行时间、运行时格式化数据、进程或线程信息等。开发者可以使用SmartPerf-Host调试工具对Trace进行解析，在其绘制的泳道图中，对应用运行过程中的性能热点进行分析，得出优化方案。本文旨在介绍OpenHarmony中常用的Trace，解释它们的含义和用途，并阐述如何通过这些Trace来识别潜在的性能问题。