js实现上拉加载更多

最新推荐文章于 2024-06-05 07:15:00 发布
最新推荐文章于 2024-06-05 07:15:00 发布
阅读量6k 收藏 7
点赞数 2
分类专栏： js 文章标签： js  上拉加载更多
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41257563/article/details/81508648
版权

先贴代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>我的优惠券</title>
	<script src="themesmobile/mo_paleng_moban/js/one.js"></script>
	<link rel="stylesheet" href="themesmobile/mo_paleng_moban/css/commen.css">
	<link rel="stylesheet" href="themesmobile/mo_paleng_moban/css/myCoupon.css">
	<style>
		.loading {
    		margin-bottom: 40px;
    		background: #f2f2f2;
    		height: 25px;
    		overflow: hidden;
    		justify-content: center;
    		/*padding-bottom: 75px;*/
    		display: none;
    		text-align: center;
		}		
		.loading img{
			width: 15px;
			height: 15px;
		}
	</style>
</head>
<body>
	<header>
		<img src="themesmobile/mo_paleng_moban/images/couponImg/back.png" alt="">
		历史记录
		<a href="user_coupon.php?act=myCoupon" class="toOther">我的卡券</a>
	</header>
	<div class="tip"></div>
	<ul>
		<!-- <li class="clearfix" style="background: url('themesmobile/mo_paleng_moban/images/couponImg/taked.png') no-repeat center;">
				<div class="left">
					<h2>全品类抵扣券</h2>
					<p class="sum">
						￥<span style="font-size: 58px; margin-right: 15px;">30</span>
						<span style="font-size: 24px; color: #878787;">消费满100.00可用</span>
					</p>
				</div>
				<div class="right">
					
				</div>
			</li> -->
	</ul>

	<!--加载更多dom结构-->
	<div class="loading">
        <span>加载中...</span>
        <img src="http://www.youtasc.com/shops/resources/images_my/load.gif">
    </div>


	<script src="themesmobile/mo_paleng_moban/js/jquery.min.js"></script>
	<script>
		var page=1; //定义页数
		var onoff=true; //控制loading开关

		$(document).ready(function(){
			$('body').css('display','none');
			$('body').fadeIn(800);
		})
		$('header img').on('click',function(){
			history.go(-1);
		});
		
		//isFirst参数  
		//在调用该方法的时候要做一个判断 
		//如果是首次加载数据 在没有数据的情况下提示没有数据
		//如果是在上拉加载中获取数据  在没有数据的情况下提示“这是我的底线”
		function getDate(isFirst=0){ 
			$.ajax({
			url:'user_coupon.php?act=my_coupon_history',
			type:'post',
			dataType:'json',
			data:{
				"page":page
			},
			success:function(res){
				console.log(res);
				// 无数据
				if(res.status==201){
					if(isFirst==1){
						// 首次加载无数据
   						onoff=false;  //当没有数据的时候，加载状态要关闭
   						$('.loading').hide();
   						$('.tip').html('<p style="font-size:24px; color:#ccc; margin:200px auto; text-align:center;">您还没有历史记录</p>');
   					}else{
   						// 下拉加载无数据
   						onoff=false;  //当没有数据的时候，加载状态要关闭
   						$('.loading').html("<span>这是我的底线</span>");
   					}	
				}else{
					// 有数据
					$('.loading').html('<span>加载中...</span><img src="themesmobile/mo_paleng_moban/images/wdtj-jzgd_03.gif">');
					var str='';
					$.each(res.data.result,function(i,k){
						str+='<li class="clearfix" style="background: url('+ (k.status==2?"themesmobile/mo_paleng_moban/images/couponImg/used.png":"themesmobile/mo_paleng_moban/images/couponImg/overdue.png") +') no-repeat center;">';
						str+='<div class="left">';
						str+='<h2>'+k.coupon_name+'</h2>';
						str+='<p class="sum">￥<span style="font-size: 58px; margin-right: 15px;">'+k.amount+'</span><span style="font-size: 24px; color: #878787;"> '+k.end_time+'到期</span></p>';
						str+='</div></li>'
					})
					
					//有数据的时候要做判断
					//如果当前是第一页，则把容器中的内容即为请求数据
					//如果当前不是第一页，则容器内容为本次请求数据和之前请求数据的拼接，所以这里用appendTo追加
					if(page==1){
	 					$('ul').html(str);
	 				}else{
	 					$(str).appendTo($('ul')); 				
	 				}
					onoff=true;	//当有数据的时候，上拉加载更多的状态为true
				}
				
			}
		});
		}
		
		//当页面加载的时候要请求数据，此时为第一次请求，请求参数为1
		getDate(1);
		
		//上拉加载更多
		$(document).scroll(function() {
         	if($(window).height()+$(document).scrollTop()>=$(document.body).height()){
             	$(".loading").show()
            	if (onoff) {
                	onoff=false
                	setTimeout(function(){
                    	page++
                   		getDate(); //上拉加载更多请求数据，不是第一次请求数据，不需要传参，采用默认参数
               		},500)
            	}
         	}
     	})

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

onoff相当于一个开关锁。
当onoff=false的时候，即没有数据的时候，关锁，禁止上拉加载更多。
当onoff=true的时候，即 有数据的时候，开锁，允许上拉加载更多。

韩大璐
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现加载更多
weixin_45912344的博客
02-02 280
第一步：将逻辑抽取封装在hooks - > useScroll.js中。第二步在组件中引入和使用。
js页面中实现加载更多功能
weixin_30439131的博客
09-01 1190
　　分页-如何实现加载更多功能，目前的在很多网站上使用的加载更多功能中，使用最多的是iscroll.js实现的上拉加载更多、下拉刷新功能。但是iscroll.js本身并没有集成加载更多的功能，需要进行自行扩展。 　　最简单的就是给一个加载更多的按钮，实现假分页加载更多，也就是页面上是全部的数据，只是按照页面显示要求，自己规定显示部分范围，其余隐藏。如果还有数据，点击下加载更多，继续拉几条数据；直...
【微信小程序开发】小程序中的上滑加载更多，下拉刷新是如何实现的？
最新发布
景天科技苑
06-05 2万+
小程序是如何实现下滑加载更多数据，下拉刷新页面的，本文就来详细探讨一下。
原生js实现下拉刷新和上拉加载更多
Suk__的博客
01-14 2354
1.下拉刷新 由于原生js太久不用了,这里列一下此处涉及到的前置知识点: 移动端触屏事件: touchstart(手指按下的一瞬间),touchmove(手指在屏幕上移动时),touchend(手指松开时) 手指在页面上的坐标: pageX,pageY 写之前首先要懂原理,下拉刷新的本质就是用户在页面顶部进行上拉动作时拉到一定的距离触发数据刷新. 大概需要做的几个点: 1.在手指按下时(touchstart)记录手指的按下位置 2.在手指下滑时(touchmove)计算手指的坐标离手指按
javascript实现上拉加载功能(适用pc/h5开发)
qq_44472790的博客
07-09 1237
js上拉加载更多工具类封装
js实现底部加载更多思路
YAYTXT的博客
11-10 355
html js滚动到底部加载更多思路
vue实现的上拉加载更多数据/分页功能示例
10-16
主要介绍了vue实现的上拉加载更多数据/分页功能,涉及基于vue的事件响应、数据交互等相关操作技巧,需要的朋友可以参考下
Jquery上拉滚动加载更多
10-15
下面将详细介绍如何使用JQuery实现手机端的上拉滚动加载更多数据。 首先，我们需要理解滚动事件（scroll event）。在JQuery中，可以使用`$(window).on('scroll', function() {...})`来监听窗口的滚动事件。当用户...
vue瀑布流组件实现上拉加载更多
10-15
Vue瀑布流组件实现上拉加载更多的功能是一种常见的前端页面设计，尤其在移动端H5页面中广泛应用。瀑布流布局，也称为Masonry布局，是将不同高度的元素在垂直方向上进行排列，形成类似瀑布流的效果。而上拉加载更多则...
js实现加载更多功能实例
11-29
在JavaScript中实现“加载更多”功能，主要是为了提高用户体验，特别是在移动端网页中，避免用户频繁地翻页。本文将详细讲解如何使用纯JS或者结合jQuery来实现这一功能，并且会结合一个简单的例子来阐述实现过程。 ...
基于HTML5上使用iScroll实现下拉刷新，上拉加载更多
09-02
总结起来，使用iScroll实现下拉刷新和上拉加载更多，需要以下几个步骤： 1. 引入iScroll库。 2. 初始化iScroll实例，设置配置选项和事件监听。 3. 定义`pullDownAction`和`pullUpAction`函数，处理数据加载逻辑。 4...
JS 插件dropload下拉刷新、上拉加载使用小结
10-20
主要介绍了JS 插件dropload下拉刷新、上拉加载使用小结,需要的朋友可以参考下
原生js实现滚动加载更多数据
yangyanqin2545的博客
06-14 2040
原生js实现滚动加载更多数据
下拉刷新，上拉加载更多
xiaoduzi1991的博客
06-07 238
下拉刷新，上拉加载更多
HTML列表的上拉加载更多
RedWolf-blog
12-28 5730
HTML列表的上拉加载更多 JQUERY
js原生实现上拉加载功能
逆水行舟，不进则退
06-15 3059
2019_6_15 js原生实现上拉加载 主要原理是 视图窗口的可视高度，滚动条当前位置，和滚动窗口的高度直接的关系 function SelectCandidatesData（type, page, keyword） { // 请求数据 return new Promise() } var vm = new Vue({ data: { page: 1,...
jQuery上拉加载更多
哈哈hyc的博客
11-30 7367
注：请在移动端查看上拉， 下拉加载更多效果 前言：     由于，不管是在PC端，还是在移动端，上拉加载更多这个功能可以说是少不了的，尤其是在移动端。     在写这个上拉加载更多这个功能之前，我也用过一些比如 iscroll.js之类的等等插件。 但是，在使用过程中发现一系列问题。比如：首先至少得引入相应的CSS文件和JS文件吧，其次在你使用时必须按照它规定的格式去写，不然就不行。还有在1...
html刷新页面_MUI实现下拉刷新和上拉加载更多
weixin_39615984的博客
11-29 223
引入相关依赖包HTML结构初始化代码上拉和下拉配置都在里面，都有详细注释，初始化完成就可以上拉和下拉了，这里有两个必须的回调方法，用来处理具体业务逻辑，每个人具体需求不一样，这里就以自己的一个需求作为示例：上拉和下拉配置都在里面，都有详细注释，初始化完成就可以上拉和下拉了，这里有两个必须的回调方法，用来处理具体业务逻辑，每个人具体需求不一样，这里就以自己的一个需求作为示例：说明一下，我这里是重新刷...
vue3实现上拉加载更多
03-20
Vue 3是一种流行的JavaScript框架，用于构建用户界面。在Vue 3中，实现上拉加载更多可以通过以下步骤完成： 1. 首先，你需要在Vue项目中安装Vue 3。你可以使用npm或yarn来安装Vue 3的最新版本。 2. 在Vue组件中，你需要定义一个数据属性来存储加载更多的状态和数据。例如，你可以创建一个名为`items`的数组来存储加载的数据。 3. 在模板中，你可以使用`v-for`指令来遍历`items`数组，并渲染每个数据项。 4. 接下来，你需要监听滚动事件，并判断是否到达页面底部。你可以使用`@scroll`指令来监听滚动事件，并在事件处理程序中执行相应的逻辑。 5. 当滚动到页面底部时，你可以调用一个方法来加载更多的数据。在这个方法中，你可以发送异步请求获取更多的数据，并将其添加到`items`数组中。 6. 最后，你可以在模板中显示加载更多的按钮或加载动画，以提供更好的用户体验。你可以根据加载状态来控制按钮或动画的显示与隐藏。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值