ztingjian
ztingjian
  • 发布:2015-09-25 11:03
  • 更新:2015-11-27 10:06
  • 阅读:4390

选项卡切换+下拉刷新 下拉加载其中一个选项卡,会触发其它选项一起加载数据

分类:MUI

下面的代码的附件是官方6.5的《选项卡切换+下拉刷新》demo
只是删除了<ul class="mui-table-view"></ul> 里的<li>
下拉加载其中一个选项卡,会触发其它选项一起加载数据,导致页面非常卡

这个问题 在6.4的时候是没有的

还有 《下拉刷新和上拉加载更多》
上拉加载更多,没有更多数据了,上拉还会继续加载上一轮数据
可以测试下官方的demo,下面有截图

<!DOCTYPE html>  
<html>  
  
	<head>  
		<meta charset="utf-8">  
		<title>Hello MUI</title>  
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
		<meta name="apple-mobile-web-app-capable" content="yes">  
		<meta name="apple-mobile-web-app-status-bar-style" content="black">  
  
		<link rel="stylesheet" href="../css/mui.min.css">  
		<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%;  
			}  
			.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;  
			}  
			.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>  
		<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">  
			<div id="slider" class="mui-slider mui-fullscreen">  
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
					<div class="mui-scroll">  
						<a class="mui-control-item mui-active" href="#item1mobile">  
							推荐  
						</a>  
						<a class="mui-control-item" href="#item2mobile">  
							热点  
						</a>  
						<a class="mui-control-item" href="#item3mobile">  
							北京  
						</a>  
						<a class="mui-control-item" href="#item4mobile">  
							社会  
						</a>  
						<a class="mui-control-item" href="#item5mobile">  
							娱乐  
						</a>  
						<a class="mui-control-item" href="#item6mobile">  
							科技  
						</a>  
					</div>  
				</div>  
				<div class="mui-slider-group">  
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">  
						<div id="scroll1" class="mui-scroll-wrapper">  
							<div class="mui-scroll">  
								<ul class="mui-table-view"></ul>  
							</div>  
						</div>  
					</div>  
					<div id="item2mobile" class="mui-slider-item mui-control-content">  
						<div class="mui-scroll-wrapper">  
							<div class="mui-scroll">  
								<ul class="mui-table-view"></ul>  
							</div>  
						</div>  
					</div>  
					<div id="item3mobile" class="mui-slider-item mui-control-content">  
						<div class="mui-scroll-wrapper">  
							<div class="mui-scroll">  
								<ul class="mui-table-view"></ul>  
							</div>  
						</div>  
					</div>  
					<div id="item4mobile" class="mui-slider-item mui-control-content">  
						<div class="mui-scroll-wrapper">  
							<div class="mui-scroll">  
								<ul class="mui-table-view"></ul>  
							</div>  
						</div>  
					</div>  
					<div id="item5mobile" class="mui-slider-item mui-control-content">  
						<div class="mui-scroll-wrapper">  
							<div class="mui-scroll">  
								<ul class="mui-table-view"></ul>  
							</div>  
						</div>  
					</div>  
					<div id="item6mobile" class="mui-slider-item mui-control-content">  
						<div class="mui-scroll-wrapper">  
							<div class="mui-scroll">  
								<ul class="mui-table-view"></ul>  
							</div>  
						</div>  
					</div>  
				</div>  
			</div>  
		</div>  
		<script src="../js/mui.min.js"></script>  
		<script src="../js/mui.pullToRefresh.js"></script>  
		<script src="../js/mui.pullToRefresh.material.js"></script>  
		<script>  
			mui.init();  
			(function($) {  
				//阻尼系数  
				var deceleration = mui.os.ios?0.003:0.0009;  
				$('.mui-scroll-wrapper').scroll({  
					bounce: false,  
					indicators: true, //是否显示滚动条  
					deceleration:deceleration  
				});  
				$.ready(function() {  
					//循环初始化所有下拉刷新,上拉加载。  
					$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {  
						$(pullRefreshEl).pullToRefresh({  
							down: {  
								callback: function() {  
									var self = this;  
									setTimeout(function() {  
										var ul = self.element.querySelector('.mui-table-view');  
										ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);  
										self.endPullDownToRefresh();  
									}, 1000);  
								}  
							},  
							up: {  
								callback: function() {  
									var self = this;  
									setTimeout(function() {  
										var ul = self.element.querySelector('.mui-table-view');  
										ul.appendChild(createFragment(ul, index, 5));  
										self.endPullUpToRefresh();  
									}, 1000);  
								}  
							}  
						});  
					});  
					var createFragment = function(ul, index, count, reverse) {  
						var length = ul.querySelectorAll('li').length;  
						var fragment = document.createDocumentFragment();  
						var li;  
						console.log(index);  
						console.log(count);  
						console.log('#########################');  
						for (var i = 0; i < count; i++) {  
							li = document.createElement('li');  
							li.className = 'mui-table-view-cell';  
							li.innerHTML = '第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));  
							fragment.appendChild(li);  
						}  
						return fragment;  
					};  
				});  
			})(mui);  
		</script>  
	</body>  
  
</html>
2015-09-25 11:03 负责人:无 分享
已邀请:
释怀

释怀

初始化的时候是每个页面都初始化了,如果设为自动上拉,就是每一个页面都自动上拉,所以都加载,我目前也没解决

  • tinny100

    用6.4版本的那个刷新js就行了


    2015-10-28 13:49

  • 释怀

    现在版本号不是才2.5吗


    2015-10-29 10:31

寻梦111

寻梦111

我也遇到相同的情况了 求解答

  • tinny100

    主要是mui.pullToRefresh.js这个带码中的问题,新版本更新了应该没这个问题了!你再试试


    2015-11-18 08:22

suifeng

suifeng

同问这个问题如何解决。太坑了

且听风吟

且听风吟

你到底是想做多选项卡的下拉刷新还是单页面的?

DCloud_UNI_FXY

DCloud_UNI_FXY

新版本已经解决此问题了

suifeng

suifeng

我从mui上下载的demo中,tab的下拉刷新是可以的。但是我给他的tab和下面对应的ul一个个的减少的时候,就剩下两个的时候都不行了。很奇怪的问题。。有时候是demo可以,全部拷贝到本地项目中来都不行,从html到各种css js文件都拷贝过来都不行。不知道mui解决此问题没。。后来前端改为了两个页面。不使用tab了。算避免此问题了

该问题目前已经被锁定, 无法添加新回复