移动端上拉加载

布满荆棘的人生 2022-05-16 04:17 225阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		<title>测试下拉加载</title>
    		<style type="text/css">
    			.demo{
    				width: 100%;
    				height: 35px;
    				line-height: 35px;
    				background-color: #ccc;font-size: 16px;text-align: center;
    			    position: fixed;
    			    left: 0;
    			    bottom: 0;
    			    opacity: 0.5;
    			    color: #fff;
    			    display: none;
    			}
    		</style>
    	</head>
    	<body>
    		<div>下拉加载更多</div>  
    		    <div class="main" style="height:700px;overflow:auto;">  
    		        <div class="child" style='border:1px solid red;margin-top:20px;color:grey;height:800px' ></div>  
    		    </div>  
    		</body>  
    		<div class="demo">
    			加载中,请稍等...
    		</div>
    		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    		<script  type="text/javascript">  
    			$(function(){
    				$(".main").scroll(function(e){
    					var sum = this.scrollHeight;  
    			        if (sum <= $(this).scrollTop() + $(this).height()) {  
    			        	$(".demo").show();
    			        	setTimeout(function () {
    			        		$(".demo").hide();
    				        	$(".main").append($(".child").clone());
    			        	}, 2000);
    			        }					
    				})
    			});  
    		</script>  
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，225人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 来写移动端，实现上拉加载，下拉刷新数据

项目是用vue +elementui来写移动端的：首先创建一个每个需要上拉加载数据的模板组件 LoadMore.vue <template> ...

た入场券/ 2024年04月19日 09:15/ 0 赞/ 86 阅读

相关移动端上拉加载更多

上拉加载更多组件的原理上拉加载 1。当滚动条到达触底距离（触底距离：距离底部的一定距离），触发加载下一页数据调用加载函数fn 2。如果正在加载下一页时（网速过慢时

雨点打透心脏的1/2处/ 2022年11月25日 13:17/ 0 赞/ 241 阅读

相关 artTemplate JS模板引擎使用(移动端上拉加载)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>红包</title>

快来打我*/ 2022年06月18日 02:16/ 0 赞/ 261 阅读

相关 vue上拉加载

最近写移动端，需要用到上拉加载的效果，由于我自己写的触摸事件在微信上遇到点小问题，所以还是借用组件来完成了。朋友推荐了这个组件，感觉还不错： vue-impressio

我就是我/ 2022年06月07日 09:39/ 0 赞/ 206 阅读

相关移动端上拉加载

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na

布满荆棘的人生/ 2022年05月16日 04:17/ 0 赞/ 226 阅读

相关 jquery之移动端下拉刷新，上拉加载更多。

jquery的下拉刷新，上拉加载一、下拉刷新二、上拉加载更多一、下拉刷新 > 思路： > 1。在想

清疚/ 2022年01月31日 04:53/ 0 赞/ 2388 阅读

相关 JQ移动端上拉加载下拉刷新2

html <header class="mui-bar mui-bar-nav"> <span class="mui-title">上拉加载下拉刷新</

痛定思痛。/ 2021年09月16日 11:24/ 0 赞/ 374 阅读

相关 JQ移动端上拉加载

Html <header class="mui-bar mui-bar-nav"> <span class="mui-title">上拉加载</span

男娘i/ 2021年09月16日 11:22/ 0 赞/ 375 阅读

相关 uniapp上拉加载

最近在写uniapp的项目，看好写到上拉加载这一块，拿出来详细说一下写法，和注意事项吧。首先在data里面要有这些值 last_page: '', //总页数

喜欢ヅ旅行/ 2021年07月25日 23:04/ 0 赞/ 624 阅读

相关上拉加载篇

1、如何判断是否已经加载完数据 (1)通过判断页面获取到的数据数量和页面平均获取到的数据判断,比如每个页面返回10条,最后一个页面不到10条 (2)在知道总

悠悠/ 2021年07月24日 20:21/ 0 赞/ 454 阅读