thinkive
thinkive
  • 发布:2014-11-05 10:50
  • 更新:2018-06-02 16:57
  • 阅读:7172

侧滑和上拉下拉刷新不能共用

分类:MUI

首先我使用了侧滑左菜单,然后使用上下刷新功能,上拉刷新和下拉刷新并不是使用2个页面(例子的父子2个页面方式),就是存在一个页面中。这时候我发现内容页面(上拉下拉区域)是空白,但是当我测试拉动的部分界面的时候,右边内容区域又出现了,IOS7.1.2设备,请问这样使用正确吗?
代码:
<div class="mui-off-canvas-wrap mui-draggable">
<div class="mui-inner-wrap">
<header class="mui-bar mui-bar-nav">
<a href="#offCanvas" class="mui-icon mui-icon-bars mui-pull-left"></a>
<h1 class="mui-title" >最新资讯</h1>
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-right"></a>
</header>
<aside id="offCanvas" class="mui-off-canvas-left"></aside>
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view mui-table-view-chevron" id="content-ul">
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" src="../../images/shuijiao.jpg">
<div class="mui-media-body">
幸福
<p class='mui-ellipsis'>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>

2014-11-05 10:50 负责人:无 分享
已邀请:
dannyTang

dannyTang

好像是安卓上不支持

忘语忘行

忘语忘行

貌似没得问题,当然我没在苹果手机上测试,谷歌浏览器上试了下是可以的,单页面下拉刷新在Android上要改源码,测试也是可以的,Android下修改方法可以看我之前的问答
http://ask.dcloud.net.cn/question/21313
下面demo,测试可行

<!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" />  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <title>侧滑菜单+下拉刷新</title>  
    <link href="../../css/mui.css" rel="stylesheet"/>  
    <link href="../../css/style.css" rel="stylesheet"/>  
</head>  
<body>  
	<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">  
		<!--侧滑菜单-->  
		<aside id="offCanvasSide" class="mui-off-canvas-left">  
			<div style="color:#FFF;">  
				这是侧滑菜单  
			</div>  
		</aside>  
		<!--主内容部分-->  
		<div class="mui-inner-wrap" id="demo">  
			<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 id="pullrefresh" v-el:pullrefresh class="mui-content mui-scroll-wrapper" style="min-height: 100%;">  
				<div class="mui-scroll">  
					<!--数据列表-->  
					<ul class="mui-table-view mui-table-view-chevron">  
						<li v-for="item in lists" class="mui-table-view-cell">  
							<a class="mui-navigate-right">{{item.text}}</a>  
						</li>  
					</ul>  
				</div>  
			</div>  
			<div class="mui-off-canvas-backdrop"></div>  
		</div>  
	</div>  
	<script>var h5pullDown = true;</script>  
	<script src="http://cdn.bootcss.com/vue/1.0.26/vue.js"></script>  
	<script src="../lib/mui.js"></script>  
	<script>  
		var vm = new Vue({  
			el:'#demo',  
			data:{  
				lists:[]  
			},  
			ready:function(){  
				var _this = this;   
				mui.init({  
					pullRefresh: {  
						container: _this.$els.pullrefresh,  
						down: {  
							callback: _this.pulldownRefresh  
						},  
						up: {  
							contentrefresh: '正在加载...',  
							callback: _this.pullupRefresh  
						}  
					}  
				});  
				var len = this.lists.length;  
				for(var i=1;i<=20;i++){  
					this.lists.push({text:'Item '+(len+i)});  
				}  
				mui.ready(function() {  
					mui(_this.$els.pullrefresh).pullRefresh().pullupLoading();  
				});  
				  
			},  
			methods:{  
				pulldownRefresh:function(){  
					console.log("pulldownRefresh");  
					var len = this.lists.length;  
					setTimeout(function() {  
						for(var i=1;i<=3;i++){  
							this.lists.unshift({text:'Item '+(len+i)});  
						}  
						mui(this.$els.pullrefresh).pullRefresh().endPulldownToRefresh();  
					}.bind(this),1500);  
					  
				},  
				pullupRefresh:function(){  
					console.log("pullupRefresh");  
					var len = this.lists.length;  
					setTimeout(function() {  
						mui(this.$els.pullrefresh).pullRefresh().endPullupToRefresh((len > 40));  
						for(var i=1;i<=3;i++){  
							this.lists.push({text:'Item '+(len+i)});  
						}  
					}.bind(this),1500);  
				}  
			}  
		});  
		  
	</script>  
</body>  
</html>
  • SixGodWill

    修改完真的是可以了,十分感谢!困扰一天,连带做梦。


    2018-04-03 09:34

  • 鹏鹏啊

    给大神跪下。。。。困扰两天了,终于解决了!


    2019-07-29 15:50

dannyTang

dannyTang

同问,是不支持吗

dannyTang

dannyTang

浏览器上是可以,安卓上不行

5***@qq.com

5***@qq.com

自己写个下拉上拉吧,用mui超简单,只要定义上下拉事情可用就可以了
然后document加事件监听这两个事件,到顶了和到底了都会触发!
在这个时候显示一下加载的view,就行了,业务自己写,不需要系统的

mui.init({  
			 		gestureConfig:{  
			 			swipeup:true,  
			 			swipedown:true,  
			 			dragstart:true,  
			 			drag:true,  
			 			dragend:true  
			 		}  
			 	});
document.addEventListener("swipeup",function(){  
						$("#moreFeedbackContainer").css("display","");  
						setTimeout(function(){  
							GetDataByAjax();  
							$("#moreFeedbackContainer").css("display","none");  
						},5000);  
					})

GetDataByAjax();就是我的业务

1***@qq.com
FYC

FYC - 80后IT男

确实,系统的相互影响,上下拉管用,但滚动条又不行了。

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