mui：下载刷新事件在手机端可用，网页端不可用原因：

最新推荐文章于 2021-03-28 01:30:18 发布

courage(●'◡'●)

最新推荐文章于 2021-03-28 01:30:18 发布

阅读量124

点赞数

分类专栏： mui

本文链接：https://blog.csdn.net/aa59609911/article/details/104941256

版权

mui 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

height: 50, //可选,默认50px.下拉刷新控件的高度,
range: 100, //可选默认100px,控件可下拉拖拽的范围
offset: 0,
官方文档写的是：height：‘50px’，网页端不可用，要写成50，或者直接不写

<!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" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />

	</head>
	<body>
		<div class="mui-content" id="refreshContainer">
			<div class="mui-card">
				<div class="mui-card-content">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">Item 1
							<span class="mui-badge mui-badge-primary">11</span>
						</li>
						<li class="mui-table-view-cell">Item 2
							<span class="mui-badge mui-badge-success">22</span>
						</li>
						<li class="mui-table-view-cell">Item 3
							<span class="mui-badge mui-badge-warning">33</span>
						</li>
						<li class="mui-table-view-cell">Item 4
							<span class="mui-badge mui-badge-danger">44</span>
						</li>
						<li class="mui-table-view-cell">Item 5
							<span class="mui-badge mui-badge-purple">55</span>
						</li>
					</ul>
				</div>
			</div>
		</div>







		<script type="text/javascript" charset="utf-8">
			mui.init({
				pullRefresh: {
					container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
					down: {
						style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
						color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
						height: 50, //可选,默认50px.下拉刷新控件的高度,
						range: 100, //可选 默认100px,控件可下拉拖拽的范围
						offset: 0, //可选 默认0px,下拉刷新控件的起始位置
						auto: false, //可选,默认false.首次加载自动上拉刷新一次
						callback: downRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					}
				}
			});

			function downRefresh() {
				mui.toast("下拉刷新启动");
				//关闭正在刷新的样式提示
				mui("#refreshContainer").pullRefresh().endPulldownToRefresh();
			}
		</script>
	</body>
</html>