mui下拉刷新以及分页加载

最新推荐文章于 2024-07-25 10:45:42 发布

@我不是大鹏

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量265

点赞数

分类专栏： vue h5 文章标签： ajax css html

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

版权

vue 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

html

<!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>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/sstf.css">
	</head>

	<body>
		<!--下拉刷新容器-->
		<!--下拉刷新容器-->
		<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul id="testUl" class="">
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
					<li>7</li>
					<li>8</li>
				</ul>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			var countDown = 0; //下拉次数
			var countUp = 0; //上拉次数
			mui.init({
				pullRefresh: {
					container: "#refreshContainer", //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
					down: { //下拉刷新
						height: 50, //可选,默认50.触发下拉刷新拖动距离,
						auto: false, //可选,默认false.首次加载自动下拉刷新一次
						contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
						contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
						contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
						callback: async function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
							if(countDown >= 3) {
								mui.toast("没有更多数据了");
								//没有数据
								mui('#refreshContainer').pullRefresh().endPulldownToRefresh(true);
								return;
							}
							//模拟向服务器获取数据的等待时间
							await sleep(1000);
							///*每次加载动态的添加一个li*/
							$("#testUl li:first").before($("<li>" + new Date() + "</li>"));
							alert("更新了一条数据");
							没有更多内容了，endPulldown 传入true， 不再执行下拉刷新
							mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
							countDown++;
						}
					},
					up: { //上拉加载
						height: 50, //可选.默认50.触发上拉加载拖动距离
						auto: false, //可选,默认false.自动上拉加载一次
						contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
						contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
						callback: async function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
							if(countUp >= 3) {
								this.endPullupToRefresh(true); //没有数据
								return;
							}
							await sleep(1000);
							/*每次加载动态的添加一个li*/
							$("#testUl").append($("<li>" + new Date() + "</li>"));
							this.endPullupToRefresh(false)
							countUp++;
						}
					}
				}
			});
			
			    //模拟线程等待,ms:单位毫秒
		    function sleep(ms) {
		        return new Promise(resolve => setTimeout(resolve, ms));
		    }
		</script>

	</body>

</html>

@我不是大鹏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
mui下拉刷新以及分页加载

html<!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> <lin
复制链接

扫一扫