上(下)拉刷新代码一
<script type="text/javascript">
mui.init({
pullRefresh : {
// 定义容器
container:'#refreshContainer',
// 往下拉(callback:回调函数)
down : {
// style:'circle',//必选,下拉刷新样式,目前支持原生5+ ‘circle’ 样式
// color:'#2BD009', //可选,默认“#2BD009” 下拉刷新控件颜色
// height:'150px',//可选,默认50px.下拉刷新控件的高度,
// range:'100px', //可选 默认100px,控件可下拉拖拽的范围
// offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
// auto: true,//可选,默认false.首次加载自动上拉刷新一次
callback :pulldownRefresh
},
// 往上拉(callback:回调函数)
up : {
callback :pullupRefresh
}
}
});
// 定义下拉回调函数
function pulldownRefresh(){
alert("进行下拉数据刷新");
// 下拉刷新结束
mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
}
// 定义上拉回调函数
function pullupRefresh(){
alert("进行上拉数据加载");
// 下拉刷新结束
mui('#refreshContainer').pullRefresh().endPullupToRefresh();
}
</script>
上(下)拉刷新代码二(刷新的同时新增一段内容)
<script type="text/javascript">
mui.init({
pullRefresh : {
container:'#refreshContainer',
down : {
callback :pulldownfresh
},
up : {
callback :pullupfresh
}
}
})
function pulldownfresh(){
// 延迟执行
setTimeout(function(){
var friendlist = document.body.querySelector(".friendlist");
var liNode = document.createElement("li");
liNode.className = "mui-table-view-cell mui-media";
liNode.innerHTML = "<a href='javascript:;'>"
+ "<img class='mui-media-object mui-pull-left' src='image/friends_icon8.png'>"
+ "<div class='mui-media-body'>"
+ "银行信用卡"
+ "<p class='mui-ellipsis'>[消息提醒]您有一波半价美食待领取</p>"
+ "</div></a>";
// 将新创建的节点添加到当前界面的第一个节点中
friendlist.insertBefore(liNode,friendlist.firstChild);
// 终止刷新,不然会一直刷新
mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
},1500);
}
function pullupfresh(){
setTimeout(function(){
var friendlist = document.body.querySelector(".friendlist");
var liNode = document.createElement("li");
liNode.className = "mui-table-view-cell mui-media";
liNode.innerHTML = "<a href='javascript:;'>"
+ "<img class='mui-media-object mui-pull-left' src='image/friends_icon8.png'>"
+ "<div class='mui-media-body'>"
+ "银行信用卡"
+ "<p class='mui-ellipsis'>[消息提醒]您有一波半价美食待领取</p>"
+ "</div></a>";
// 将新创建的节点添加到当前界面的最后一个节点中
friendlist.appendChild(liNode);
// true表示没有更多的数据
mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
},1500);
}
</script>