缘聚缘散
缘聚缘散
  • 发布:2016-05-20 15:14
  • 更新:2017-09-27 13:58
  • 阅读:7212

mui中选项卡切换加下拉刷新,怎么样实现点击的效果

分类:MUI
mui

代码如下
ui中的li是动态添加的,我现在想点击li把id传到别下一个页面上去,但是加了点击事件不行,点不过去,求大神指教,我是新手,刚接触hbuilder还没有一个月

  
<!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%;  
				z-index: 1;  
			}  
			  
			.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>  
		<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 id="zxlist" class="mui-control-item mui-active" href="#item1mobile">  
							最新  
						</a>  
						<a id="phlist" class="mui-control-item" href="#item2mobile">  
							组队  
						</a>  
						<a id="wdlist" class="mui-control-item" href="#item3mobile">  
							问答  
						</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" id="zxdiv">  
								<ul class="mui-table-view" id="zxul" >  
  
								</ul>  
							</div>  
						</div>  
					</div>  
					<div id="item2mobile" class="mui-slider-item mui-control-content" >  
						<div class="mui-scroll-wrapper">  
							<div class="mui-scroll" id="phdiv">  
								<ul class="mui-table-view" id="phul">  
  
								</ul>  
							</div>  
						</div>  
					</div>  
					<div id="item3mobile" class="mui-slider-item mui-control-content">  
						<div class="mui-scroll-wrapper">  
							<div class="mui-scroll" id="wddiv">  
								<ul class="mui-table-view" id="wdul">  
  
								</ul>  
  
							</div>  
						</div>  
					</div>  
				</div>  
			</div>  
		</div>  
		<script src="../js/mui.min.js"></script>  
		<script src="../js/Url.js" type="text/javascript" charset="utf-8"></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  
				});  
				var zxlist;  
				var phlist;  
				var wdlist;  
				mui.plusReady(function() {  
					var self1 = plus.webview.currentWebview();  
					var zx = self1.zxid;  
					var ph = self1.phid;  
					var wd = self1.wdid;  
					var zxfirst = true;  
					var wdfirst = true;  
					var phfirst = true;  
					zxlist = document.getElementById("zxlist");  
					phlist = document.getElementById("phlist");  
					wdlist = document.getElementById("wdlist");  
					zxdown(zx);  
					zxlist.addEventListener('tap', function() {  
						zxdown(zx);  
					});  
					wdlist.addEventListener('tap', function() {  
						wddown(wd);  
					});  
					phlist.addEventListener('tap', function() {  
						phdown(ph);  
					});  
					//循环初始化所有下拉刷新,上拉加载。  
					$.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.querySelectorAll('.mui-table-view');  
//										ul.appendChild(createFragment(ul, index, 5));  
										self.endPullUpToRefresh();  
									}, 1000);  
								}  
							}  
						});  
					});  
					var li;  
					var fragment = document.createDocumentFragment();  
					var createFragment = function(ul, index, count, reverse) {  
						return fragment;  
					}  
					var createtime;  
  
					function zxdown(tid, page) {  
						mui.ajax(Url.ip + Url.getLmBy, {  
							data: {  
								tid: tid,  
								cpage: page  
							},  
							dataType: 'json', //服务器返回json格式数据  
							type: 'post', //HTTP请求类型  
							timeout: 10000, //超时时间设置为10秒;  
							success: function(data) {  
								var result = data.rows;  
								console.log(JSON.stringify(data));  
								for (var i = 0; i < result.length; i++) {  
									console.log(JSON.stringify(result[i]));  
									li = document.createElement('li');  
									createtime = (result[i].createtime + "").substring(0, 10);  
									li.innerHTML = '<li class="mui-table-view-cell mui-media" onclick = "opennew(' + result[i].cid + ')" >' +  
										'<a href="javascript:;">' +  
										'<img class="mui-media-object mui-pull-left" src="' + Url.home + Url.icon + result[i].icon + '">' +  
										'<div class="mui-media-body">' +  
										result[i].title +  
										//										'<p class="mui-ellipsis">' +  
										//										'能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?' +  
										//										'</p>' +  
										'<div class="mui-ellipsis  mui-h5">' +  
										createtime +  
										'<span class="mui-ellipsis" style="margin-left: 0.5em;">' +  
										'<img src="' + Url.home + Url.icon + result[i].icon + '" style="width: 20px; height: 12px;/>' +  
										'<span style="margin-left: 0.5em;">' +  
										result[i].hf +  
										'</span>' +  
										'</span>' +  
										'<span style=" margin-left: 0.5em ;">' +  
										'<img src="' + Url.home + Url.icon + result[i].icon + '" style="width: 12px; height: 12px;/>' +  
										'<span style="margin-left: 0.5em;">' +  
										result[i].hp +  
										'</span>' +  
										'</span>' +  
										'</div>' +  
										'</div>' +  
										'</a>' +  
										'</li>';  
									fragment.appendChild(li);  
								}  
								if (zxfirst) {  
									var list = document.getElementById("zxdiv");  
									var self = $(list);  
									var ul = document.getElementById("zxul");  
									ul.insertBefore(createFragment(ul, 0, 10, true), ul.firstChild);  
									zxfirst = false;  
								}  
							},  
							error: function(xhr, type, errorThrown) {}  
						});  
					}  
  
					function wddown(tid, page) {  
						mui.ajax(Url.ip + Url.getLmBy, {  
							data: {  
								tid: tid,  
								cpage: page  
							},  
							dataType: 'json', //服务器返回json格式数据  
							type: 'post', //HTTP请求类型  
							timeout: 10000, //超时时间设置为10秒;  
							success: function(data) {  
								var result = data.rows;  
								console.log(JSON.stringify(data));  
								for (var i = 0; i < result.length; i++) {  
									console.log(JSON.stringify(result[i]));  
									li = document.createElement('li');  
									  
									createtime = (result[i].createtime + "").substring(0, 10);  
									li.innerHTML = '<li class="mui-table-view-cell mui-media" onclick = "opennew(' + result[i].cid + ')" >' +  
										'<a href="javascript:;">' +  
										'<img class="mui-media-object mui-pull-left" src="' + Url.home + Url.icon + result[i].icon + '">' +  
										'<div class="mui-media-body">' +  
										result[i].title +  
										'<div class="mui-ellipsis  mui-h5">' +  
										createtime +  
										'<span class="mui-ellipsis" style="margin-left: 0.5em;">' +  
										'<img src="' + Url.home + Url.icon + result[i].icon + '" style="width: 20px; height: 12px;/>' +  
										'<span style="margin-left: 0.5em;">' +  
										result[i].hf +  
										'</span>' +  
										'</span>' +  
										'<span style=" margin-left: 0.5em ;">' +  
										'<img src="' + Url.home + Url.icon + result[i].icon + '" style="width: 12px; height: 12px;/>' +  
										'<span style="margin-left: 0.5em;">' +  
										result[i].hp +  
										'</span>' +  
										'</span>' +  
										'</div>' +  
										'</div>' +  
										'</a>' +  
										'</li>';  
									fragment.appendChild(li);  
								}  
								if (wdfirst) {  
									var list = document.getElementById("wddiv");  
									var self = $(list);  
									var ul = document.getElementById("wdul");  
									ul.insertBefore(createFragment(ul, 1, 10, true), ul.firstChild);  
									wdfirst = false;  
								}  
							},  
							error: function(xhr, type, errorThrown) {}  
						});  
					}  
  
					function phdown(tid, page) {  
						mui.ajax(Url.ip + Url.getLmBy, {  
							data: {  
								tid: tid,  
								cpage: page  
							},  
							dataType: 'json', //服务器返回json格式数据  
							type: 'post', //HTTP请求类型  
							timeout: 10000, //超时时间设置为10秒;  
							success: function(data) {  
								var result = data.rows;  
								console.log(JSON.stringify(data));  
								for (var i = 0; i < result.length; i++) {  
									console.log(JSON.stringify(result[i]));  
									li = document.createElement('li');  
									createtime = (result[i].createtime + "").substring(0, 10);  
									li.innerHTML = '<li class="mui-table-view-cell mui-media" onclick = "opennew(' + result[i].cid + ')">' +  
										'<a href="javascript:;">' +  
										'<img class="mui-media-object mui-pull-left" src="' + Url.home + Url.icon + result[i].icon + '">' +  
										'<div class="mui-media-body">' +  
										result[i].title +  
										'<div class="mui-ellipsis  mui-h5">' +  
										createtime +  
										'<span class="mui-ellipsis" style="margin-left: 0.5em;">' +  
										'<img src="' + Url.home + Url.icon + result[i].icon + '" style="width: 20px; height: 12px;/>' +  
										'<span style="margin-left: 0.5em;">' +  
										result[i].hf +  
										'</span>' +  
										'</span>' +  
										'<span style=" margin-left: 0.5em ;">' +  
										'<img src="' + Url.home + Url.icon + result[i].icon + '" style="width: 12px; height: 12px;/>' +  
										'<span style="margin-left: 0.5em;">' +  
										result[i].hp +  
										'</span>' +  
										'</span>' +  
										'</div>' +  
										'</div>' +  
										'</a>' +  
										'</li>';  
									fragment.appendChild(li);  
								}  
								if (phfirst) {  
									var list = document.getElementById("phdiv");  
									var self = $(list);  
									var ul = document.getElementById("phul");  
									ul.insertBefore(createFragment(ul, 2, 10, true), ul.firstChild);  
									phfirst = false;  
								}  
							},  
							error: function(xhr, type, errorThrown) {}  
						});  
					}  
  
					function opennew(id) {  
						mui.openWindow({  
							url: 'shequ_xingqing.html',  
							id: 'info.html',  
							extras: {  
								cid: id  
							}  
						});  
					}  
				});  
			})(mui);  
		</script>  
	</body>  
  
</html>  

2016-05-20 15:14 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

解决了吗 我也遇到了这个问题 好坑啊 找了好久了

奋斗中

奋斗中

mui的事件管理第一个就是,下边有个自定义详解,但是我没法在电脑上调试一直出plus is not defined

  • 1***@qq.com

    下个模拟器调试啊


    2017-08-01 16:16

  • 1***@qq.com

    还有怎么弄的啊 我按照那个来写 也不得行啊


    2017-08-01 16:24

  • 奋斗中

    你的可以了吗


    2017-08-02 08:50

5***@qq.com

5***@qq.com

把id写在li上获取

五叶神

五叶神 - 世界上没有免费的午餐,也不要有一颗贪婪的心

jquery的on方法没用过么?mui的on方法是一样的用法,监听已存在父级元素的点击事件;

mui('.mui-content').on('tap','li',function(){    //.mui-content或其他初始已存在的父级元素  
	himall.openVW(this.getAttribute('data-id'));   //打开页面的方法  
});

另外这样for循环每次操作dom对象添加li是不合理的,消耗资源,应该for或者js模板引擎组装好字符串后直接用js的insertAdjacentHTML 方法插入所有li结构

List.insertAdjacentHTML('beforeend', template('initData', data));
勇敢的心_

勇敢的心_ - 始于1994

仿照你的代码写出来了,有没有上拉加载的,加我QQ,谢谢大神,1106935565

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