需要进入插件 dropload.min.js ,css样式


<link rel="stylesheet" href="css/css.css" />
<script src="js/jquery.min.js" ></script>
<script src="js/dropload.min.js" ></script>



<div class="wrapper">
	<div class="inc-main">
		<div class="inc-bar" >
			<div class="data-item" id="dateSelect">
				<span class="time-val" >今日</span><span class="iconfont icon-downb"></span>
			</div>
		</div>
		<div class="inc-list">
			<div class="inc-panel">
				<div class="inc-panel_bd">
					<div class="inc-row">
						<div class="text">订单号</div>
						<div class="val text-default">RB89384303838474723839</div>
					</div>
					<div class="inc-row">
						<div class="text">直推收益</div>
						<div class="val text-green">0.837373</div>
					</div>
				</div>
				<div class="inc-panel_ft">
					<div class="id">2022-01-22 11:06 晚上</div>
					<div class="unit">USDT</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	$(function() {
		// 页数
		var page = 0;
		// 每页展示5个
		var size = 5;
		// dropload
		$('.inc-main').dropload({
			scrollArea: window,
			loadDownFn: function(me) {
				page++;
				// 拼接HTML
				var result = '';
				$.ajax({
					type: 'GET',
					url: 'json/json.json',
					dataType: 'json',
					success: function(data) {
						var arrLen = data.lists.length;
						if (arrLen > 0) {
							console.log(data.lists.title)
							for (var i = 0; i < arrLen; i++) {
								result += '<div class="inc-panel">' +
									'<div class="inc-panel_bd">' +
									'<div class="inc-row">' +
									'<div class="text">订单号</div>' +
									'<div class="val text-default">RB89384303838474723839</div>' +
									'</div>' +
									'<div class="inc-row">' +
									'<div class="text">直推收益</div>' +
									'<div class="val text-green">0.837373</div>' +
									'</div>' +
									'</div>' +
									'<div class="inc-panel_ft">' +
									'<div class="id">2022-01-22 11:06 晚上</div>' +
									'<div class="unit">USDT</div>' +
									'</div>' +
									'</div>';
							}
							// 如果没有数据
						} else {
							// 锁定
							me.lock();
							// 无数据
							me.noData();
						}
						// 为了测试,延迟1秒加载
						setTimeout(function() {
							// 插入数据到页面,放到最后面
							$('.inc-list').append(result);
							// 每次数据插入,必须重置
							me.resetload();
						}, 1000);
					},
					error: function(xhr, type) {
						alert('Ajax error!');
						// 即使加载出错,也得重置
						me.resetload();
					}
				});
			}
		});
	});
</script>

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注