jQuery WeUI 组件下拉刷新和滚动加载的实现(复制就可以使用)

最新推荐文章于 2024-05-11 09:47:59 发布

@我不是大鹏

最新推荐文章于 2024-05-11 09:47:59 发布

阅读量839

点赞数 1

分类专栏： h5 js 文章标签： jquery html javascript

本文链接：https://blog.csdn.net/qq_38132995/article/details/120673232

版权

h5 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

这是一个关于网页滚动加载和下拉刷新功能的示例代码。使用jQuery和jQuery-WeUI库，实现了内容区域的下拉刷新和无限滚动加载。当用户下拉时，页面会模拟刷新并在设定的延迟后更新内容；当用户滚动到页面底部时，会加载更多内容。此代码适用于需要动态加载数据的网页应用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<title>滚动加载更多</title>
		<link rel="stylesheet" href="http://cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
		<link rel="stylesheet" href="http://cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">
		<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
		<script src="http://cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>
	</head>

	<body>
		<div class="content" style="background-color: #FFFFFF; width: 100%;height:88%; margin-top:40px;margin-top: 45px;position: absolute; margin-bottom:45px;padding:0px; overflow: hidden;">
			<div class="list-main-mian weui-form-preview infinite weui-pull-to-refresh" id="listwrap" style="height:100%; margin-top: 1px;overflow:auto;  z-index: 1">
				<!--下拉刷新-->
				<div class="weui-pull-to-refresh__layer" style="padding: 5px;">
					<div class="weui-pull-to-refresh__arrow"></div>
					<div class="weui-pull-to-refresh__preloader"></div>
					<div class="down">下拉刷新</div>
					<div class="up">释放刷新</div>
					<div class="refresh">正在刷新</div>
				</div>
				<div class="weui-form-preview" id="Tolist">
					<!--内容展示区域--><h1>6666</h1>
				</div>
				<div class="weui-loadmore" style="padding-bottom:30px;height:20px">
					<i class="weui-loading"></i>
					<span class="weui-loadmore__tips">正在加载</span>
				</div>
			</div>
		</div>
		<script>
			  var pages = 1;
 
   var sizes = 4;
 
   var loading = false;  //状态标记
 
   $(function () {
       loadlist();
   })
 
 //=========================下拉刷新
   $("#listwrap").pullToRefresh().on("pull-to-refresh", function () {
       setTimeout(function () {
           pages = 1;
           $("#Tolist").html("");
           loadlist();
           if (loading) loading = false;
           $("#listwrap").pullToRefreshDone(); // 重置下拉刷新
       }, 1500);   //模拟延迟
   });
 
   //============================滚动加载
   $("#listwrap").infinite().on("infinite", function () {
       if (loading) return;
       loading = true;
       pages++; //页数
    	alert("999");
       $('.weui-loadmore').show();
       setTimeout(function () {
           loadlist();
           loading = false;
       }, 2500);   //模拟延迟
   });
 
// =======加载数据loadlist();
  function loadlist() {
       var html = "";
        html += ' <div class="weui-form-preview__bd"> ';
                       html += ' <div class="weui-form-preview__item"> ';
                       html += ' <p">' + 6 + '</p> ';
                       html += ' <p">' + 6 + '</p> ';
                        html += ' <p">' + 6 + '</p> ';
                         html += ' <p">' + 6 + '</p> ';
                          html += ' <p">' + 6 + '</p> ';
                           html += ' <p">' + 6 + '</p> ';
                            html += ' <p">' + 6 + '</p> ';
                             html += ' <p">' + 6 + '</p> ';
                              html += ' <p">' + 6 + '</p> ';
                               html += ' <p">' + 6 + '</p> ';
                                html += ' <p">' + 6 + '</p> ';
                       html += ' <p">' + 6 + '</p> ';
                        html += ' <p">' + 6 + '</p> ';
                         html += ' <p">' + 6 + '</p> ';
                          html += ' <p">' + 6 + '</p> ';
                           html += ' <p">' + 6 + '</p> ';
                            html += ' <p">' + 6 + '</p> ';
                             html += ' <p">' + 6 + '</p> ';
                              html += ' <p">' + 6 + '</p> ';
                               html += ' <p">' + 6 + '</p> ';
                       html += ' </div> ';
                       html += ' </div> ';
                       $("#Tolist").append(html);
                       loading = true;
                       $(".weui-loadmore").hide();
   }
	</script>
	</body>

</html>

@我不是大鹏

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery WeUI 组件下拉刷新和滚动加载的实现(复制就可以使用)

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <title>滚动加载更多</title> <link rel="stylesheet" href="htt
复制链接

扫一扫