移动端开发框架mui之上拉刷新、下拉加载数据（选项卡左右移动自动和刷新指定选项卡内容）

最新推荐文章于 2024-03-17 23:02:09 发布

原创

最新推荐文章于 2024-03-17 23:02:09 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端框架 #html5 #mui框架之自动刷新选项卡

移动端开发框架mui之上拉刷新、下拉加载数据（加载多选项卡数据）

之前的代码：

<!doctype html>
<html>
 
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<style>
					html,
					body {
						background-color: #efeff4;
					}
					.mui-bar~.mui-content .mui-fullscreen {
						top: 44px;
						height: auto;
					}
					.mui-pull-top-tips {
						position: absolute;
						top: -20px;
						left: 50%;
						margin-left: -25px;
						width: 40px;
						height: 40px;
						border-radius: 100%;
						z-index: 1000;
					}
					.mui-bar~.mui-pull-top-tips {
						top: 24px;
					}
					.mui-pull-top-wrapper {
						width: 42px;
						height: 42px;
						display: block;
						text-align: center;
						background-color: #efeff4;
						border: 1px solid #ddd;
						border-radius: 25px;
						background-clip: padding-box;
						box-shadow: 0 4px 10px #bbb;
						overflow: hidden;
					}
					.mui-pull-top-tips.mui-transitioning {
						-webkit-transition-duration: 200ms;
						transition-duration: 200ms;
					}
					.mui-pull-top-tips .mui-pull-loading {
						/*-webkit-backface-visibility: hidden;
						-webkit-transition-duration: 400ms;
						transition-duration: 400ms;*/
						
						margin: 0;
					}
					.mui-pull-top-wrapper .mui-icon,
					.mui-pull-top-wrapper .mui-spinner {
						margin-top: 7px;
					}
					.mui-pull-top-wrapper .mui-icon.mui-reverse {
						/*-webkit-transform: rotate(180deg) translateZ(0);*/
					}
					.mui-pull-bottom-tips {
						text-align: center;
						background-color: #efeff4;
						font-size: 15px;
						line-height: 40px;
						color: #777;
						margin-bottom: 100px;/** 显示加载提示信息： 没有更多数据了等等。 */
					}
					.mui-pull-top-canvas {
						overflow: hidden;
						background-color: #fafafa;
						border-radius: 40px;
						box-shadow: 0 4px 10px #bbb;
						width: 40px;
						height: 40px;
						margin: 0 auto;
					}
					.mui-pull-top-canvas canvas {
						width: 40px;
					}
					.mui-slider-indicator.mui-segmented-control {
						background-color: #efeff4;
					}
				</style>
	</head>
 
	<body  style="background-color: #FFFFFF;">
		<!-- 页面导航栏 -->
		<header id="header" class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的评价</h1>
		</header>
		
		<!-- 页面内容 -->
		<div class="mui-content" style="background-color:#fff;" >
			<div id="slider" class="mui-slider mui-fullscreen">
				<!-- 选项卡 -->
				<div style="padding: 10px 10px;z-index: 1000;">
					<div id="segmentedControl" class="mui-segmented-control">
						<a class="mui-control-item mui-active" data-index="0" href="#item0">已评价</a>
						<a class="mui-control-item" data-index="1" href="#item1" >待评价</a>
					</div>
				</div>
				
				<div class="mui-slider-group"> 
					<!-- 已评价 -->
					<div id="item0" class="mui-slider-item mui-control-content">
						<div  class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed" id="itemList0">	
								已评价内容
								</ul>					
								<div id="tab-empty0" wdith="100%" style="text-align: center;"><img src="image/icon_empty.png" style="width: 200px;height: 200px;"></div>
							</div>
						</div> 
					</div>
					
					<!-- 待评价 -->
					<div id="item1" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
							<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed" id="itemList1">
							待评价内容
							</ul>	
							<div  id="tab-empty1" wdith="100%" style="text-align: center;"><img src="image/icon_empty.png" style="width: 200px;height: 200px;"></div>
							</div>
						</div>
					</div>
					
				</div>
			</div>	
		</div>	
		<script src="js/mui.js"></script>
		<script src="js/mui.pullToRefresh.js"></script>
		<script src="js/mui.pullToRefresh.material.js"></script>
		<script src="js/app.js"></script>
		<script type="text/javascript">
			mui.init({
				statusBarBackground: '#f7f7f7',
				swipeBack:false //启用右滑关闭功能
			});
			//阻尼系数

最低0.47元/天解锁文章