MUI for mobile pull-up loading pull-down refresh feature

The pull-up load drop-down refresh function on the mobile side is essential to use very frequently

MUI Framework Implementation method

Introducing MUI Loading files

<script src= "Js/mui.min.js" ></script>
<link href= "Css/mui.min.css" rel= "stylesheet"/>

HTML:

<div id= "Pullrefresh" class= "Mui-content mui-scroll-wrapper" >
<div class= "Mui-scroll" >
<!--data List--
<ul class= "Mui-table-view" >
<li class= "Mui-table-view-cell" >data</li>
<li class= "Mui-table-view-cell" >data</li>
</ul>
</div>
</div>

JS:

<script type= "Text/javascript" charset= "Utf-8" >
Mui.init ({
Pullrefresh: {
container: ' #pullrefresh ',//the container to operate, can choose to the line, #Id,. Class is fine.
Down : {
style: ' Circle ',
color: ' #2BD009 ',//optional, default ' #2BD009 ' drop-down to refresh control color
height: ' 150px ',//optional, default 50px. Drop-down refreshes the height of the control,
Range : ' 100px ',//optional default 100px, controls can be dragged and pulled
offset: ' 0 ',//optional default 0px, drop-down refresh control start position
auto:false,//Optional, default false. First load automatic pull-up refresh once
Callback:pulldownrefresh
},
Up : {
contentrefresh: ' Loading ... ',//drop-down text displayed
Callback:pulluprefresh
}
}
});

/**
* Pull down to refresh the specific business implementation
*/
function Pulldownrefresh () {
setTimeout (function () {
mui (' #pullrefresh '). Pullrefresh (). Endpulldowntorefresh ();//refresh completed
}, ();
}
var count = 0;

/**
* Pull-up load specific business implementation
*/
function Pulluprefresh () {
setTimeout (function () {
mui (' #pullrefresh '). Pullrefresh (). Endpulluptorefresh ((++count > 4));//The parameter is true to indicate that there is no more data.
var table = Document.body.querySelector ('. Mui-table-view ');
var cells = Document.body.querySelectorAll ('. Mui-table-view-cell ');
var newcount = cells.length>0?5:20; First load 20, full screen
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 ">item ' + (i + 1) + ' </a> ';
Table.appendchild (LI); Place new content loaded in
}
}, ();
}

</script>

Drop-down Refresh

Pull-up loading

MUI for mobile pull-up loading pull-down refresh feature