闲聊：
最近因公司项目需求，小颖需要写一些html5页面，方便公司IOS和Android给APP中嵌套使用，其中需要实现拉下刷新功能，其实就是调用了一下mui.js就可以啦嘻嘻，下面跟着小颖一起来看看具体是怎么实现的吧.
目录：
效果图：
mui.min.js、mui.min.css和jquery-3.3.1.js 小颖就不粘贴啦，大家在网上百度下载下来就可以啦嘻嘻，小颖就把default.css和index.html文件粘贴出来哦。
default.css
* {
margin: 0;
padding: 0;
border: 0;
}
html,
body,
.view-container {
height: 100%;
font-family: PingFangSC-Medium;
}
.bg {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
display: none;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.bg .loading {
width: 40px;
height: 40px;
border-radius: 50%;
border: 5px solid #BEBEBE;
border-left: 5px solid #498aca;
animation: load 1s linear infinite;
-moz-animation: load 1s linear infinite;
-webkit-animation: load 1s linear infinite;
-o-animation: load 1s linear infinite;
}
@-webkit-keyframes load {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes load {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-o-keyframes load {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
.top-title {
background: url(../images/2.jpg) no-repeat center;
background-size: cover;
width: 100%;
height: 350px;
}
index.html
<!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">
<link rel="stylesheet" href="./css/default.css">
</head>
<body>
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div class="top-title"></div>
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron" id="dataList"></ul>
</div>
</div>
<div class="bg">
<div class="loading"></div>
</div>
<script src="./js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script>
// //进度显示
$(‘.bg‘).css(‘display‘, ‘flex‘);
mui.init({
pullRefresh: {
container: ‘#pullrefresh‘,
down: {
style: ‘circle‘,
callback: pulldownRefresh
},
// up: {
// auto:true,
// contentrefresh: ‘正在加载...‘,
// callback: pullupRefresh
// }
}
});
var count = 0;
function pullupRefresh() {
setTimeout(function () {
getDt(‘default‘);
}, 1500);
}
pullupRefresh();
function addData() {
getDt(‘down‘);
}
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
setTimeout(function () {
if (count < 3) {
addData();
mui(‘#pullrefresh‘).pullRefresh().endPulldownToRefresh();
mui.toast("为你推荐了5篇文章");
} else {
mui(‘#pullrefresh‘).pullRefresh().endPulldownToRefresh();
mui.toast("没有更多数据了");
}
}, 1500);
}
function getDt(ways) {
count++;
var table = document.body.querySelector(‘.mui-table-view‘);
var cells = document.body.querySelectorAll(‘.mui-table-view-cell‘);
var len;
if (ways == ‘default‘) {
var newCount = cells.length > 0 ? 5 : 10;//首次加载10条，满屏
for (var i = cells.length, len = i + newCount; i < len; i++) {
var li = document.createElement(‘li‘);
li.className = ‘mui-table-view-cell‘;
li.innerHTML = ‘<a class="mui-navigate-right" href="http://www.cnblogs.com/yingzi1028">Item ‘ + (i + 1) + ‘</a>‘;
table.appendChild(li);
}
}
if (ways == ‘down‘) {
for (var i = cells.length, len = i + 5; i < len; i++) {
var li = document.createElement(‘li‘);
li.className = ‘mui-table-view-cell‘;
li.innerHTML = ‘<a class="mui-navigate-right" href="http://www.cnblogs.com/yingzi1028">Item ‘ + (i + 1) + ‘</a>‘;
//下拉刷新，新纪录插到最前面；
table.insertBefore(li, table.firstChild);
}
}
//进度隐藏
$(‘.bg‘).css(‘display‘, ‘none‘);
}
mui(‘body‘).on(‘tap‘, ‘a‘, function () {
window.top.location.href = this.href;
});
$(‘a‘).ontouchstart = function (e) {
e.preventDefault();
};
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/yingzi1028/p/9648232.html
时间： 2024-10-12 02:42:17