1***@qq.com
1***@qq.com
  • 发布:2019-08-07 15:59
  • 更新:2020-12-21 18:06
  • 阅读:2844

MUI 上拉加载 始终显示在页面顶部

分类:MUI

稍微往上一拉就会触发
贴代码,显示效果,求解

  
	<body style="height: 100%;">  
		<script src="../js/mui.js"></script>  
		<script type="text/javascript">  
			mui.init();  
		</script>  
  
		<!-- <header id="header" class="mui-bar mui-bar-nav navbar">  
			<button class="mui-btn mui-btn-blue mui-btn-link mui-pull-left mui-action-back" id="cancelbtn">返回</button>  
			<h1 class="mui-title navtitle">备件领退用记录</h1>  
			<button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" id="savebtn">申请</button>  
		</header> -->  
  
		<div id="refreshContainer" class="mui-content mui-scroll-wrapper" style="">  
			<div class="mui-scroll" id="scroll">  
				<!--数据列表-->  
				<ul class="mui-table-view mui-table-view-chevron" style="margin-top: 50px;">  
					<li class="mui-table-view-cell">  
						<div class="mui-card">  
							<div class="mui-card-header">  
								<span style="display: block;">WX-20190801-000028</span>  
								<button class="orderState" style="background:rgb(92,184,92);">退用</button>  
							</div>  
							<div class="mui-card-content">  
								<div class="mui-card-content-inner">  
									<div class="orderId">零备件仓库<img src="../images/rightarr.png" class="orderDateImg" style="margin-left:5px;margin-right:5px;width:25px">零备件仓库</div>  
									<div class="orderDate">  
										<img src="../images/people.png" class="orderDateImg">  
										<div class="orderDateContent">领用人:管理员</div>  
									</div>  
									<div class="orderDate">  
										<img src="../images/shijian.png" class="orderDateImg">  
										<div class="orderDateContent">领用时间:2019-8-1 11:37</div>  
									</div>  
								</div>  
							</div>  
						</div>  
					</li>  
					<li class="mui-table-view-cell">  
						<div class="mui-card">  
							<div class="mui-card-header">  
								<span style="display: block;">WX-20190801-000028</span>  
								<button class="orderState" style="background:rgb(92,184,92);">退用</button>  
							</div>  
							<div class="mui-card-content">  
								<div class="mui-card-content-inner">  
									<div class="orderId">零备件仓库<img src="../images/rightarr.png" class="orderDateImg" style="margin-left:5px;margin-right:5px;width:25px">零备件仓库</div>  
									<div class="orderDate">  
										<img src="../images/people.png" class="orderDateImg">  
										<div class="orderDateContent">领用人:管理员</div>  
									</div>  
									<div class="orderDate">  
										<img src="../images/shijian.png" class="orderDateImg">  
										<div class="orderDateContent">领用时间:2019-8-1 11:37</div>  
									</div>  
								</div>  
							</div>  
						</div>  
					</li>  
					<li class="mui-table-view-cell">  
						<div class="mui-card">  
							<div class="mui-card-header">  
								<span style="display: block;">WX-20190801-000028</span>  
								<button class="orderState" style="background:rgb(92,184,92);">退用</button>  
							</div>  
							<div class="mui-card-content">  
								<div class="mui-card-content-inner">  
									<div class="orderId">零备件仓库<img src="../images/rightarr.png" class="orderDateImg" style="margin-left:5px;margin-right:5px;width:25px">零备件仓库</div>  
									<div class="orderDate">  
										<img src="../images/people.png" class="orderDateImg">  
										<div class="orderDateContent">领用人:管理员</div>  
									</div>  
									<div class="orderDate">  
										<img src="../images/shijian.png" class="orderDateImg">  
										<div class="orderDateContent">领用时间:2019-8-1 11:37</div>  
									</div>  
								</div>  
							</div>  
						</div>  
					</li>  
					<li class="mui-table-view-cell">  
						<div class="mui-card">  
							<div class="mui-card-header">  
								<span style="display: block;">WX-20190801-000028</span>  
								<button class="orderState" style="background:rgb(92,184,92);">退用</button>  
							</div>  
							<div class="mui-card-content">  
								<div class="mui-card-content-inner">  
									<div class="orderId">零备件仓库<img src="../images/rightarr.png" class="orderDateImg" style="margin-left:5px;margin-right:5px;width:25px">零备件仓库</div>  
									<div class="orderDate">  
										<img src="../images/people.png" class="orderDateImg">  
										<div class="orderDateContent">领用人:管理员</div>  
									</div>  
									<div class="orderDate">  
										<img src="../images/shijian.png" class="orderDateImg">  
										<div class="orderDateContent">领用时间:2019-8-1 11:37</div>  
									</div>  
								</div>  
							</div>  
						</div>  
					</li>  
					<li class="mui-table-view-cell">  
						<div class="mui-card">  
							<div class="mui-card-header">  
								<span style="display: block;">WX-20190801-000028</span>  
								<button class="orderState" style="background:rgb(92,184,92);">退用</button>  
							</div>  
							<div class="mui-card-content">  
								<div class="mui-card-content-inner">  
									<div class="orderId">零备件仓库<img src="../images/rightarr.png" class="orderDateImg" style="margin-left:5px;margin-right:5px;width:25px">零备件仓库</div>  
									<div class="orderDate">  
										<img src="../images/people.png" class="orderDateImg">  
										<div class="orderDateContent">领用人:管理员</div>  
									</div>  
									<div class="orderDate">  
										<img src="../images/shijian.png" class="orderDateImg">  
										<div class="orderDateContent">领用时间:2019-8-1 11:37</div>  
									</div>  
								</div>  
							</div>  
						</div>  
					</li>  
				</ul>  
			</div>  
		</div>  
  
  
		<script>  
			//公共变量  
			var fromsource = '维修';  
			var eqfiDevicename = '';  
			var eqfiDepartmentnum = '';  
			var maliId = '';  
		</script>  
  
		<script>  
			mui.init({  
				pullRefresh: {  
					container: "#refreshContainer", //下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等  
					down: {  
						style: 'circle', //必选,下拉刷新样式,目前支持原生5+ ‘circle’ 样式  
						color: '#2BD009', //可选,默认“#2BD009” 下拉刷新控件颜色  
						height: '50px', //可选,默认50px.下拉刷新控件的高度,  
						range: '100px', //可选 默认100px,控件可下拉拖拽的范围  
						offset: '0px', //可选 默认0px,下拉刷新控件的起始位置  
						auto: false, //可选,默认false.首次加载自动上拉刷新一次  
						callback: function() {  
  
						}  
					},  
					up: {  
						height: 50,  
						auto: false,  
						contentrefresh: '正在加载...',  
						contentnomore: '没有更多数据了', //可选,请求完毕若没有更多数据时显示的提醒内容;                          
						callback: function() {  
							console.log($('#refreshContainer').css('height'));  
							console.log($('#scroll').css('height'));  
						}  
					}  
				}  
			});  
		</script>  
	</body>  
  
</html>  

2019-08-07 15:59 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com (作者) - Bert

在线求助~~~

1***@qq.com

1***@qq.com (作者) - Bert

1***@qq.com

1***@qq.com (作者) - Bert

notwo

notwo

解决了没?怎么弄得啊?

q1q1

q1q1

我也遇到了相同的问题 ,上拉显示更多和正在加载一直显示再顶部 ,解决了吗

l***@sina.com

l***@sina.com

解决了吗?我也遇到这样的问题了!上拉到底就触发了,是怎么回事呢?

1***@qq.com

1***@qq.com

mui.init({
pullRefresh: {
container: "#homepage", //下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等
down: { // 下拉刷新
height: 50, //可选,默认50.触发下拉刷新拖动距离,
auto: false, //可选,默认false.首次加载自动下拉刷新一次
contentdown: "下拉可以刷新", //可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
contentover: "释放立即刷新", //可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容
contentrefresh: "正在刷新...", //可选,正在刷新状态时,下拉刷新控件上显示的标题内容
callback: pullfreshAA //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
},
up: { //下拉加载
height: 100, //可选.默认50.触发上拉加载拖动距离
auto: false, //可选,默认false.自动上拉加载一次
contentrefresh: "正在加载...", //可选,正在加载状态时,上拉加载控件上显示的标题内容
contentnomore: '没有更多数据了', //可选,请求完毕若没有更多数据时显示的提醒内容;
callback: SelectPosition //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
}
}
});

function SelectPosition() {
setTimeout(function() {
mui.toast('加载成功');
mui('#homepage').pullRefresh().endPullupToRefresh();
}, 1000)
}

function pullfreshAA() {
setTimeout(function() {
console.log("shauxin");
mui.toast('刷新成功');
mui('#homepage').pullRefresh().endPulldownToRefresh(); //完成刷新
}, 1000)

}

  • l***@sina.com

    滚动条,触底就执行 上拉的 函数了,是怎么回事呢?


    2019-10-10 10:02

哎呀我不懂

哎呀我不懂

<div class="list" id="table_id"> <div class="mui-scroll"> <ul class="mui-table-view" id="ul_list"> <li> </li> </ul> </div> </div>

第一点:container: '#table_id'
第二点:var table = document.body.querySelector('#ul_list');

  • 哎呀我不懂

    <div class="list" id="table_id">

    <div class="mui-scroll">

    <ul class="mui-table-view" id="ul_list">

    </ul>

    </div>

    </div>


    2019-10-17 16:25

v***@163.com

v***@163.com

加上这句注释

<!--<div class="main-nomessage pad-top-rem18" v-if="designOrganizationList.length==0"></div>-->

加在上拉下载作用div的里面一层,我也不知道为什么,反正我的好了。

  • v***@163.com

    <!--<div class="main-nomessage pad-top-rem18" v-if="designOrganizationList.length==0"></div>-->


    2019-10-30 17:35

7***@qq.com

7***@qq.com

楼主解决了吗?同样遇到这种情况了

[已删除]

[已删除]

同问

4***@qq.com

4***@qq.com

#scroll 和 ul 之间 增加一级试试

7***@qq.com

7***@qq.com

在外面加一层<div class="container"></div>

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