jquery+weui实现ajax请求滚动加载更多列表，点击进入详情，返回列表回到刚刚用户浏览的位置！

最新推荐文章于 2023-02-06 21:49:19 发布

Mrchoi

最新推荐文章于 2023-02-06 21:49:19 发布

阅读量1k

点赞数

分类专栏： jquery 文章标签： js ajax jquery web app

本文链接：https://blog.csdn.net/Mrchoi/article/details/104608776

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近领导分配了一个新的项目来维护，jq+weui写的微信端项目，因为之前一直用的vue，所以遇到了好多坑。单单这个滚动加载就花了一天时间，现在记录一下实现过程吧，加深一下印象，避免日后再次踩坑。
完整代码下载 ，欢迎给star哦，谢谢~：https://github.com/hongcheng-choi/jquery-loadMore
首先引入css文件：

//weui的css文件
<link rel="stylesheet" type="text/css" href="css/weui.min-1.0.css" /> 
<link rel="stylesheet" type="text/css" href="css/weuix-1.0.css" />
//css初始化文件
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/list.css" />

页面布局部分
在这里插入图片描述
点击进入详情后，返回当前列表位置

<body style="max-width: 7.68rem;">
		<div id='home'>
			<!-- 头部 -->
			<header>
				<ul>
					<li class="open-popup" data-target="citySelect">
						城市<span class="icon icon-35"></span>
						<span class="header-divider">|</span>
					</li>
					<li id="timeSelect">
						时间<span class="icon icon-35"></span>
					</li>
				</ul>
				<div class="bid-title">
					<span class="bid-title-left">
						<i></i> 今天
						<span class="bid-title-left-time">（10月24日）星期三</span>
					</span>
					<span class="bid-title-right">
						场数:
						<i class="bid-title-right-num">3</i>
					</span>
				</div>
			</header>
			<!-- 列表 -->
			<div id="list"></div>
			<div id="loading">正在加载中···</div>
		</div>
</body>

js部分

<script src="js/jquery-2.1.4.js"></script>
<script src="js/cuscom/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/detailList.js"></script>

<script type="text/javascript">
			var detailList = new h5Detail2list();
			var loading = false;
			var listnum = 0; //总加载条数
			var num = 5 //每次加载条数
			if ($.isEmptyObject(detailList.getLocalStorage()['extraData']) || !detailList.isBack()) {
				//初始化
				getList();
			}
			//模拟ajax数据请求
			function getList() {
				$.ajax({
					url: "json/data.json",
					type: "get",
					dataType: 'json',
					success: function(data) {
						var li = '';
						listnum = $.isEmptyObject(detailList.getLocalStorage()['extraData']) ? listnum : detailList.getLocalStorage()[
							'extraData']['lastIndex'];
						var data_length = data.length; //数据的总条数
						var remainder = data_length % num; //page 是每次加载的条数，利用数据的总条数/每次加载条数 取余数
						if (listnum <= 5 || data.length >= (num + listnum)) {
							loading = true
							for (i = listnum; i < (num + listnum); i++) {
								li
									+= '' +
									'    <div class="bid-area-list" >' +
									'      <div class="list-title">' +
									'		<p>' +
									'		  <span class="icon icon-68"></span>车辆所在地：' + data[i].city + (i + 1) +
									'		</p>' +
									'		<a href="javascript:;"><span class="color_price">' + data[i].money +
									'		</span></a>' +
									'	   </div>' +
									'      <a href="detail.html" class="list-detail">' +
									'		<div class="list-image">' +
									'		 <img src="img/home/item_4.jpg" alt />' +
									'		 <div class="list-licensedCity">' + data[i].status + '</div>' +
									'		</div>' +
									'		<div class="list-content">' +
									'		 <p class="list-content-title">' + data[i].title + '</p>' +
									'		 <p class="list-content-subTitle">' + data[i].year +
									'		  <span>|</span>' + data[i].km +
									'		  <span>|</span>' + data[i].color +
									'		 </p>' +
									'		<p class="list-content-subTitle">车牌号：' + data[i].CarLicense + ' </p>' +
									'		</div>' +
									'      </a>' +
									'    </div>';
							}
							$("#list").append(li);
							listnum += num;
						} else if (remainder != 0 && data_length - listnum == remainder) {
							loading = true
							for (i = listnum; i < (remainder + listnum); i++) {
								li
									+= '' +
									'    <div class="bid-area-list" >' +
									'      <div class="list-title">' +
									'		<p>' +
									'		  <span class="icon icon-68"></span>车辆所在地：' + data[i].city + (i + 1) +
									'		</p>' +
									'		<a href="javascript:;"><span class="color_price">' + data[i].money +
									'		</span></a>' +
									'	   </div>' +
									'      <a href="detail.html" class="list-detail">' +
									'		<div class="list-image">' +
									'		 <img src="img/home/item_4.jpg" alt />' +
									'		 <div class="list-licensedCity">' + data[i].status + '</div>' +
									'		</div>' +
									'		<div class="list-content">' +
									'		 <p class="list-content-title">' + data[i].title + '</p>' +
									'		 <p class="list-content-subTitle">' + data[i].year +
									'		  <span>|</span>' + data[i].km +
									'		  <span>|</span>' + data[i].color +
									'		 </p>' +
									'		<p class="list-content-subTitle">车牌号：' + data[i].CarLicense + ' </p>' +
									'		</div>' +
									'      </a>' +
									'    </div>';
							}
							$("#list").append(li);
							listnum += num;
						} else {
							loading = false
							$('#loading').html("没有更多了哦~");
						}
					},
					error: function() {
						console.log("出错了");
					}
				});
			}
			//滚动加载
			$(window).scroll(function() {
				if ($(window).scrollTop() + $(window).height() - $(document).height() >= -1) {
					if (!loading) {
						$('#loading').html("没有更多了哦~");
						return false;;
					} else {
						setTimeout(function() {
							// 滚动加载
							$('#loading').html("正在加载中···");
							getList();
							detailList.insertHtmlStr($("#list").html(), {
								lastIndex: listnum
							});
						}, 1000);
					}
				}
			});
		</script>

Mrchoi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery+weui实现ajax请求滚动加载更多列表，点击进入详情，返回列表回到刚刚用户浏览的位置！

最近领导分配了一个新的项目来维护，jq+weui写的微信端项目，因为之前一直用的vue，所以遇到了好多坑。单单这个滚动加载就花了一天时间，现在记录一下实现过程吧，加深一下印象，避免日后再次踩坑。
复制链接

扫一扫