mui 下拉刷新
2018-08-16 本文已影响0人
ZhiPengTu
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通知</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
<link href="css/style.css" rel="stylesheet" />
<link href="css/iconfont.css" rel="stylesheet" />
</head>
<style>
.flexWrap {
padding: 0;
}
.ellipsis {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mui-content>.mui-table-view:first-child {
margin-top: 1px;
}
.titleBar {
text-align: right;
background: #eee;
}
.titleBar a {
color: #009aff;
}
.mui-btn-red {
background: #EB0000;
}
.lay-isRead {
position: absolute;
top: -0.5rem;
left: -0.625rem;
width: 0.5rem;
height: 0.5rem;
background: #EB0000;
border-radius: 50%;
}
.mui-table-view-cell:after {
position: absolute;
right: 0;
bottom: 0;
left: 0px;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #c8c7cc;
}
.mui-table-view-cell {
position: relative;
overflow: hidden;
padding: 11px 15px;
-webkit-touch-callout: none;
}
.flexWrap>span:nth-child(2){
float: right;
color: #333;
}
.flexWrap>span:nth-child(1){
color: #333;
}
</style>
<body>
<div class="mui-content mui-scroll-wrapper" id="refreshContainer">
<div class="mui-scroll">
<ul id="OA_task_1" class="mui-table-view">
<li class="mui-table-view-cell">
<div class="mui-slider-right mui-disabled">
<a class="lay-hide mui-btn mui-btn-primary">隐藏<br/>提醒
</a>
<a class="lay-delet mui-btn mui-btn-red">删除</a>
</div>
<div class="mui-slider-handle">
<p class="flexWrap">
<span>订单申诉反馈</span>
<span>01-02 22:22</span>
</p>
<p class="ellipsis">您订单号：12369775515的问题反馈结果为</p>
<span class="lay-isRead"></span>
</div>
</li>
<!-- <li class="mui-table-view-cell">
<div class="mui-slider-right mui-disabled">
<a class="mui-btn mui-btn-green">隐藏提醒</a>
<a class="mui-btn mui-btn-red">删除</a>
</div>
<div class="mui-slider-handle">
<p class="flexWrap">
<span>订单号：0123456789</span>
<span>01-02 22:22</span>
</p>
<p class="ellipsis">您有一笔收款，支付宝到账 100.12元，请及时查收。</p>
</div>
</li>
<li class="mui-table-view-cell">
<div class="mui-slider-right mui-disabled">
<a class="mui-btn mui-btn-green">隐藏提醒</a>
<a class="mui-btn mui-btn-red">删除</a>
</div>
<div class="mui-slider-handle">
<p class="flexWrap">
<span>订单号：0123456789</span>
<span>01-02 22:22</span>
</p>
<p class="ellipsis">您有一笔收款，支付宝到账 100.12元，请及时查收。</p>
</div>
</li> -->
</ul>
</div>
</div>
</body>
<script src="js/mui.min.js"></script>
<script type="application/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
mui.ready(function() {
// init_title();
});
mui.init({
pullRefresh: {
container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
down: {
height: 50, //可选,默认50.触发下拉刷新拖动距离,
auto: false, //可选,默认false.首次加载自动下拉刷新一次
contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
callback: pullfreshAA //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
}
}
});
//下拉刷新触发 函数
function pullfreshAA() {
console.log('sdfs')
}
// function init_title() {
// var json = {
// centerTitle: "消息通知",
// backgroudColor: "#0099ff",
// leftViewImg: "goback",
// leftViewTitle: "",
// rightViewTitle: ""
// }
// window.APPJS.unifyClassMethod("NavgationViewClass", "makeNavgationView", JSON.stringify(json), "");
// };
// function viewWillAppear() {
// init_title();
// }
// function leftBtnClick() {
// window.APPJS.unifyClassMethod("NavgationViewClass", "back", "", "");
// }
</script>
</html>
