MUI 上滑加载(没有更多数据)页面回弹 - 效果
效果图 · 略
- 查看官方文档对应的 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="static.docs/plugins/mui/css/mui.min.css">
<style type="text/css">
.mui-icon{display: none;}
</style>
</head>
<body>
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell"><a class="mui-navigate-right">Item 43</a></li>
<li class="mui-table-view-cell"><a class="mui-navigate-right">Item 43</a></li>
<li class="mui-table-view-cell"><a class="mui-navigate-right">Item 43</a></li>
<li class="mui-table-view-cell"><a class="mui-navigate-right">Item 43</a></li>
<li class="mui-table-view-cell"><a class="mui-navigate-right">Item 43</a></li>
<li class="mui-table-view-cell"><a class="mui-navigate-right">Item 43</a></li>
<li class="mui-table-view-cell"><a class="mui-navigate-right">Item 43</a></li>
<li class="mui-table-view-cell"><a class="mui-navigate-right">Item 43</a></li>
</ul>
</div>
</div>
<script src="static.docs/plugins/mui/js/mui.min.js"></script>
<script>
mui.init({
pullRefresh: {
container: '#pullrefresh',
// down: {
// callback: pulldownRefresh
// },
up: {
contentrefresh: ' ',
callback: pullupRefresh
}
}
});
/**
* 下拉刷新具体业务实现
*/
// function pulldownRefresh() {
// setTimeout(function() {
// mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
// }, 1500);
// }
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPullupToRefresh(); //参数为true代表没有更多数据了。
}, 1500);
}
if (mui.os.plus) {
mui.plusReady(function() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
}, 1000);
});
} else {
mui.ready(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
});
}
</script>
</body>
</html>
附:参考文章
-
官方源码1 · 级:审查源代码
-
官方源码2 · 级:审查源代码
以上就是关于“ MUI 上滑加载(没有更多数据)页面反弹落地 ” 的全部内容。