【原生js案例】让你的移动页面实现自定义的上拉加载和下拉刷新

目前很多前端UI都是自带有上拉加载和下拉刷新功能，按照官网配置去实现即可，比如原生小程序，vantUI等UI框架，都替我们实现了内部功能。

那如何自己来实现一个上拉加载和下拉刷新的功能？

实现效果

  • 不用浏览器的css滚动条，自定义实现滚动效果
    请添加图片描述
  • 自定义实现滚动，添加上拉加载和下拉刷新
    请添加图片描述

代码实现

  • UI页面美化
*{
   
      margin: 0

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/940512.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【D3.js in Action 3 精译_046】DIY 实战：在 Observable 平台利用饼图布局函数实现 D3 多个环形图的绘制

【D3.js in Action 3 精译_046】DIY 实战：在 Observable 平台利用饼图布局函数实现 D3 多个环形图的绘制

当前内容所在位置： 第五章 饼图布局与堆叠布局 ✔️ 5.1 饼图和环形图的创建 ✔️ 5.1.1 准备阶段（一）5.1.2 饼图布局生成器（二）5.1.3 圆弧的绘制（三）5.1.4 数据标签的添加（四&#…
阅读更多...
【案例80】麒麟操作系统无法使用Uclient访问NC65

【案例80】麒麟操作系统无法使用Uclient访问NC65

问题现象 麒麟操作系统，安装Uclient，添加应用后无法看到登录界面，一直在转圈。 问题分析 进入到Uclient的工作目录 发现在工作目录下，无相关app.log生成。 查看Uclient的main.log发现，有大量的报错与Uclient下的sha…
阅读更多...
阿里云OSS批量导出下载地址 OSS批量导出 OSS导出清单

阿里云OSS批量导出下载地址 OSS批量导出 OSS导出清单

阿里云官方提供的客户端不能批量导出下载地址，阿里云OSS批量导出下载地址 OSS批量导出 OSS导出清单 1、参数配置：填写阿里云的AccessKeyID和AccessKeySecret，在阿里右上角的用户获取 2、选择地域：就是你OSS开的是哪个地方的&…
阅读更多...
【CSS in Depth 2 精译_084】第 14 章：CSS 蒙版、形状与剪切概述 + 14.1：CSS 滤镜

【CSS in Depth 2 精译_084】第 14 章：CSS 蒙版、形状与剪切概述 + 14.1：CSS 滤镜

当前内容所在位置（可进入专栏查看其他译好的章节内容） 第四部分 视觉增强技术 ✔️【第 14 章 蒙版、形状与剪切】 ✔️ 14.1 滤镜 ✔️ 14.1.1 滤镜的类型 ✔️14.1.2 背景滤镜 ✔️ 14.2 蒙版 文章目录 第 14 章 蒙版、形状与剪切 Masks, shapes, and…
阅读更多...
如何高效调试复杂布局？Layout Inspector 的 Toggle Deep Inspect 完全解析

如何高效调试复杂布局？Layout Inspector 的 Toggle Deep Inspect 完全解析

Layout Inspector 是 Android Studio 提供的一个强大工具，用于分析和调试 Android 应用的 UI 布局。前置条件是app是debug调试状态，它允许你在应用运行时实时查看布局层次结构、UI 元素的属性，并帮助你诊断 UI 渲染问题。 Toggle Deep Inspe…
阅读更多...
wxpython 基础代码

wxpython 基础代码

wxpython 基础代码 import wxclass MyFrame(wx.Frame):def __init__(self):super().__init__(parentNone, title计算器, size(450, 250))panel wx.Panel(self)# panel.SetBackgroundColour(wx.GREEN)self.icon1 wx.Icon(name"test.ico", typewx.BITMAP_TYPE_PNG)se…
阅读更多...
2.5 io_uring

2.5 io_uring

io_uring的相关函数接口介绍 io_uring 是 Linux 内核中一种高效的异步 I/O 接口，最早引入于 **Linux 内核 5.1** 版本。它是由 Jens Axboe 开发的，目的是提供更高效的异步 I/O 操作，尤其是相比 epoll 和 aio，io_uring 减少了系统…
阅读更多...
服务器数据恢复—V7000存储中多块磁盘出现故障导致业务中断的数据恢复案例

服务器数据恢复—V7000存储中多块磁盘出现故障导致业务中断的数据恢复案例

服务器存储数据恢复环境： 一台V7000存储上共12块SAS机械硬盘（其中1块是热备盘），组建了2组Mdisk，创建了一个pool。挂载在小型机上作为逻辑盘使用，小型机上安装的AIXSybase。 服务器存储故障： V7…
阅读更多...
python 读取win7 win10本机ipv6 地址转发到电邮（备份）

python 读取win7 win10本机ipv6 地址转发到电邮（备份）

python 版本： 3.8.10 用于外网查询SMB服务器ipv6 地址。服务器定时查询本机ipv6地址，如地址变动则用电邮发送新地址。 import smtplib from email.mime.text import MIMEText from email.mime.multipart import MIMEMultipart import ssl import socket…
阅读更多...
多个JAVA环境变量安装配置

多个JAVA环境变量安装配置

在做java代码审计时，为了要成功运行目标环境，时长要对于jdk版进行切换，且在装多个jdk时还时长会遇到安装配置后环境变量不生效的情况，下文介绍； 1、为什么安装了新的jdk，有的时候环境变量中的jdk版本确还是…
阅读更多...
数字经济下的 AR 眼镜

数字经济下的 AR 眼镜

目录 1. 📂 AR 眼镜发展历史 1.1 AR 眼镜相关概念 1.2 市面主流 XR 眼镜 1.3 AR 眼镜大事记 1.4 国内外 XR 眼镜 1.5 国内 AR 眼镜四小龙 2. 🔱 关键技术 2.1 AR 眼镜近眼显示原理 2.2 AR 眼镜关键技术 2.3 AR 眼镜技术难点 3. &#x1f4a…
阅读更多...
maven-resources-production:ratel-fast: java.lang.IndexOutOfBoundsException

maven-resources-production:ratel-fast: java.lang.IndexOutOfBoundsException

Maven生产环境中遇到java.lang.IndexOutOfBoundsException的问题，尝试了重启电脑、重启IDEA等常规方法无效，最终通过直接重建工程解决了问题。 Rebuild Project 再启动OK
阅读更多...
TDesign：NavBar 导航栏

TDesign：NavBar 导航栏

NavBar 导航栏 左图，右标 appBar: TDNavBar(padding: EdgeInsets.only(left: 0,right: 30.w), // 重写左右内边距centerTitle:false, // 不显示标题height: 45, // 高度titleWidget: TDImage( // 左图assetUrl: assets/img/logo.png,width: 147.w,height: 41.w,),ba…
阅读更多...
【计算机网络】lab2 Ethernet（链路层Ethernet frame结构细节）

【计算机网络】lab2 Ethernet（链路层Ethernet frame结构细节）

🌈 个人主页：十二月的猫-CSDN博客 🔥 系列专栏： 🏀计算机网络_十二月的猫的博客-CSDN博客 💪🏻 十二月的寒冬阻挡不了春天的脚步，十二点的黑夜遮蔽不住黎明的曙光 目录 1. 前言 2.…
阅读更多...
ansible剧本快速上手

ansible剧本快速上手

playbook剧本介绍 是什么：能户长期保存，且能实现批量配置、部署…的文件格式：yaml格式。用 空格 冒号 头号 句号语法检测：ansible-playbook --syntax-check install-zabbix.yaml或则 -C检测取消默认任务：gather_facts…
阅读更多...
【LeetCode每日一题】——434.字符串中的单词数

【LeetCode每日一题】——434.字符串中的单词数

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【解题思路】七【时空频度】八【代码实现】九【提交结果】 一【题目类别】 字符串 二【题目难度】 简单 三【题目编号】 434.字符串中的单词数 四【题目描述】 统计字符串中的单词个…
阅读更多...
C++ OpenGL学习笔记（1、Hello World空窗口程序）

C++ OpenGL学习笔记（1、Hello World空窗口程序）

终于抽出时间系统学习OpenGL 教程，同时也一步一步记录怎样利用openGL进行加速计算。 目录 1、环境准备1.1、库的下载1.2、库的选择及安装 2、OpenGL第一个项目，Hello World!2.1、新建hello world控制台项目2.2、配置openGL环境2.2.1 包含目录配置2.2.2 …
阅读更多...
MySQL复制问题和解决

MySQL复制问题和解决

目录 环境介绍 一，主库执行delete，从库没有该数据 模拟故障 修复故障 二，主库执行insert，从库已存在该数据 模拟故障 故障恢复 三，主库执行update，从库没有该数据 模拟故障 故障恢复 四&#xf…
阅读更多...
AWTK 在树莓派 pico 上的移植笔记

AWTK 在树莓派 pico 上的移植笔记

1. 配置文件 (awtk_config.h) pico 和 stm32f103 的配置差不多，虽然 pico 的内存要大不少，但是也不足提供一个完整的 FrameBuffer，所以只能使用片段 LCD。 我们在 awtk-stm32f103 的配置 基础稍作修改即可。 /* 使用片段 LCD */#define FRA…
阅读更多...
构建MacOS应用小白教程（打包 签名 公证 上架）

构建MacOS应用小白教程（打包 签名 公证 上架）

打包 在package.json中，dependencies会被打进 Electron 应用的包里，而devDependencies则不会，所以必要的依赖需要放到dependencies中。files中定义自己需要被打进 Electron 包里的文件。以下是一个完整的 mac electron-builder的配置文件。 …
阅读更多...
最新文章

Copyright @ 2022~2023