移动端上滑加载更多（H5）

背景：

项目的移动端需要弄一个上滑加载更多的效果，达到分页效果。。

我的第一想法去网上找个插件直接弄上，想法是好的，现实是残酷的。。网上找的不是乱七八糟的

就是一些有名的插件太大了，我一个小功能显得太臃肿。。而且关键页面早就弄好了，用上插件各种

不兼容，重新调页面那就工程太大了。所以自己写个简单上滑。。

原理：

scrollHeight即真实内容的高度；

clientHeight比较好理解，是视窗的高度，就是我们在浏览器中所能看到内容的高度；

scrollTop是视窗上面隐藏掉的部分。

1 如果真实的内容比视窗高度小，则一直加载到超过视窗，

2 如果上滑红色部分没有了那不就是到底部了么？？？（最直接的判断不就是：scrollTop+可视部分（设备高度）==文档（真是高度））

就是滑到了底部了。

代码：

<script >/*第一种*/$(function(){$(window).scroll(function(){var scrollH = document.documentElement.scrollHeight;var clientH = document.documentElement.clientHeight;if (scrollH == (document.documentElement.scrollTop | document.body.scrollTop) + clientH){//加载新数据alert("加载新数据");}});});/*第二中 *///获取当前浏览器中的滚动事件$(window).off("scroll").on("scroll", function () {var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; //获取当前浏览器的滚动条高度if (scrollHeight <= ($(window).scrollTop() + $(window).height())) { //判断当前浏览器滚动条高度是否已到达浏览器底部，如果到达底部加载下一页数据信息$("#loadingImg").css('visibility','visible');setTimeout(function () {//模拟ajaxfor(m=0;m<5;m++){$(".order-list").append(appendStr);}},1000)}});</script>

样式和业务逻辑自己写下吧。。。。职场小白有错欢迎指出谢谢

移动端上滑加载更多（H5）相关推荐

使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据，下拉刷新当前列表数据（等同于翻页功能）
<template><div class="sg-page-body"><div class="sg-list"><v ...
上拉加载更多其他方法
一屏展示. (1)还有一种方法,用grid布局 .vx-layout { width: 100%; height: 100vh; display: grid; grid-template-rows: ...
java h5 上拉加载更多_移动端H5页面上拉加载更多功能实现（二）
之前已经写过一篇关于上拉加载更多的文章,那个主要是根据滚动实现分页向后台发起请求实现.这次实现方式为后台返回所有需要加载的数据,前端这边做视觉上的分页效果.实现原理也是根据滚动距离触发加载更多的条件. ...
H5——移动端JQ实现下拉刷新、上拉加载更多
前言这里用的JQ库里免费插件__dropload,效果图在文末引入去上面链接里面下载内容,可以本地引入 <link rel="stylesheet" href=&quo ...
Jquery 实现H5页面上拉加载更多
在最新的H5开发项目中,需要开发上拉加载更多的功能,如何实现上拉加载更多,网上有很多插件可以实现,如:mescroll.mui.isScroll等等,最初我也是选择了使用插件,但在使用过程中发现了如果 ...
MUI 上滑加载（没有更多数据）页面回弹 - 效果
MUI 上滑加载(没有更多数据)页面回弹 - 效果效果图 · 略查看官方文档对应的 demo效果即可参考代码如下: <!DOCTYPE html> <html>< ...
vue 移动端实现上拉加载更多
根据项目需求实现上拉加载更多-我用的是 vue-infinite-loading 插件实现的.下面是安装流程和使用方法:有需要直接拿去用第一步:安装 npm install vue-infinite ...
jQuery上拉加载更多
<header id="header">首页</header><section id="main"><ul id=& ...
php中手机端ajax上拉加载更多,jQuery手机网页上拉加载更多
手机网页和PC网页都可以使用的上拉加载更多内容,其中LoadingDataFn自己改为ajax加载就可以了var page = 1, //分页码 off_on = false, //分页开关(滚动加载 ...

移动端上滑加载更多（H5）

移动端上滑加载更多（H5）相关推荐

最新文章

热门文章