mui 选项卡 的多个 上拉加载更多
2019-12-16 本文已影响0人
郭的妻
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>订单</title>
<!--link-->
<link href="css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/baibaoxiang.css?v=2019121006" />
<link rel="stylesheet" type="text/css" href="css/global.css?v=2019121006" />
<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
<!--script-->
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/mui.min.js"></script>
</head>
<body>
<!--订单 选项卡-->
<div class="dingdan mui-clearfix">
<div class="dingdans mui-text-center size18 dingdans-active" data-type="1">全部</div>
<div class="dingdans mui-text-center size18" data-type="2">待支付</div>
<div class="dingdans mui-text-center size18" data-type="3">已完成</div>
<div class="dingdans mui-text-center size18" data-type="4">已取消</div>
</div>
<div id="refreshContainer1" class="mui-content mui-scroll-wrapper dingcontent dingcontents-active" style="background: #fff;padding-top: 0.4rem;">
<div class="mui-scroll mui-clearfix" style="width:100%;padding-bottom:0.5rem;">
<div class="dingcontents mui-clearfix"></div>
</div>
</div>
<div id="refreshContainer2" class="mui-content mui-scroll-wrapper dingcontent" style="background: #fff;padding-top: 0.4rem;">
<div class="mui-scroll mui-clearfix" style="width:100%;padding-bottom:0.5rem;">
<div class="dingcontents mui-clearfix"></div>
</div>
</div>
<div id="refreshContainer3" class="mui-content mui-scroll-wrapper dingcontent" style="background: #fff;padding-top: 0.4rem;">
<div class="mui-scroll mui-clearfix" style="width:100%;padding-bottom:0.5rem;">
<div class="dingcontents mui-clearfix"></div>
</div>
</div>
<div id="refreshContainer4" class="mui-content mui-scroll-wrapper dingcontent" style="background: #fff;padding-top: 0.4rem;">
<div class="mui-scroll mui-clearfix" style="width:100%;padding-bottom:0.5rem;">
<div class="dingcontents mui-clearfix"></div>
</div>
</div>
</body>
<script src="js/buju.js"></script>
<script src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript">
var pagedata = 'dingdanlist';
</script>
<script src="js/global.js?v=2019121006"></script>
<script src="js/baibaoxiang.js?v=2019121006"></script>
</html>
css
/*
*订单页 开始
*/
/*选项卡*/
.dingdan {
width: 100%;
padding: 0rem 0.099rem;
position: fixed;
top: 0rem;
left: 0rem;
display: flex;
justify-content: center;
align-items: center;
background:#fff;
z-index: 999;
}
.dingdans {
width: 16%;
height: 0.40rem;
line-height: 0.4rem;
margin: 0rem 0.16rem;
}
.dingdans-active {
border-bottom: 1px solid #111;
}
/*对应选项卡 内容*/
.dingcontent {
width: 100%;
display: none;
}
.dingcontents {
width: 100%;
background: #eee;
}
.dingcontents-active {
display: block;
}
/*具体到订单*/
.dingdanlist {
width: 100%;
background: #fff;
margin-bottom:0.04rem ;
}
.dingdan-a{
width:100%;
padding: 0.14rem 0.12rem 0.1rem 0.12rem;
border-bottom:0.01rem solid #eee;
}
.dingdan-a img{
width: 35%;
position: relative;
height: 0.8rem;
margin-right:0.08rem ;
}
.dingdan-div{
width:61%;
}
.dingdan-div p{
width:100%;
line-height:0.22rem;
text-align: justify;
color: #707070;
}
.dingdan-div p span:nth-of-type(1){
margin-right:0.1rem;
}
.dingdanlist-b{
width:100%;
padding: 0.06rem 0.12rem;
}
.dingdanlist-b span,.dingdanlist-b button{
height: 0.27rem;
line-height:0.27rem;
border:none;
border-radius:0rem;
padding: 0rem;
}
.dingdanlist-b button{
background:#ff901a;
color:#fff;
border-radius:0.3rem;
padding: 0rem 0.1rem;
margin-left: 0.1rem;
}
/*
*订单页 结束
*/
js
//mui 初始化 +上拉加载
mui.each(mui('.dingcontent'), function(index, ele) {
mui(ele).pullRefresh({
up: {
style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
height: '30px', //可选,默认50px.下拉刷新控件的高度,
range: '30px', //可选 默认100px,控件可下拉拖拽的范围
offset: '0rem', //可选 默认0px,下拉刷新控件的起始位置
contentrefresh: '正在加载...',
contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
callback: pullupRefresh
}
});
});
//上拉加载更多
function pullupRefresh() {
var self = this;
setTimeout(function() {
switch(self.element.id) {
case '#refreshContainer1':
break;
case '#refreshContainer2':
break;
case '#refreshContainer3':
break;
case '#refreshContainer4':
break;
}
//加载更多 ajax
dingdan($(".dingdans-active").attr("data-type"),1);
}, 500);
}
$.ajax({
url:"",
dataType: 'json',
type: 'POST',
data:{
page:page,//分页
uid:JSON.parse(UserData).id, //用户ID
type:type, // 状态
},
success: function(res) {
console.log(res)
if(res.code == 0){
if(res.data.data.length!=0){
var data=res.data.data;
if(count == 0){
$(".dingcontents").html("");
}
var html=$(".dingcontents-active .dingcontents").html();
for(var i=0;i<data.length;i++){
html += '<div class="dingdanlist">'
html += ' <a href="'+ PageSkip + 'zyxiangqing.html?id=' + data[i].wid + '" class="dingdan-a mui-clearfix mui-block">'
html += ' <img src="' + data[i].wenzhang.imgurl + '" class="mui-pull-left"/>'
html += ' <div class="dingdan-div mui-pull-left">'
html += ' <p class="size15 color-H7 mui-ellipsis-2">' + data[i].wenzhang.title + '</p>'
html += ' <p>'
html += ' <span class="mui-pull-left size16">' + data[i].createtime + '</span>'
if(data[i].price!=null){
html += ' <span class="size16 color-red">￥' + data[i].price + '</span>'
}
html += ' </p>'
html += ' </div>'
html += ' </a>'
html += ' <div class="mui-clearfix dingdanlist-b">'
if(data[i].status == "0" || data[i].status == 0){
html += ' <span class="mui-pull-left size18 color-red">未支付</span>'
html += ' <button class="mui-pull-right size16 dingdanlist-q" data-pre="'+ data[i].pre +'" data-price="'+data[i].price+'">付款</button>'
html += ' <button class="mui-pull-right size16 dingdanlist-c" data-id="'+ data[i].id +'" style="background: #ccc!important;">取消</button>'
}else if(data[i].status == "1" || data[i].status == 1){
html += ' <span class="mui-pull-left size18 color-huang">已完成</span>'
}else if(data[i].status == "2" || data[i].status == 2){
html += ' <span class="mui-pull-left size18 color-huang">已取消</span>'
}
html += ' </div>'
html += '</div>';
}
$(".dingcontents-active .dingcontents").html(html)
page++;
if(type == "1"){
mui('#refreshContainer1').pullRefresh().endPullupToRefresh();
}else if(type == "2"){
mui('#refreshContainer2').pullRefresh().endPullupToRefresh();
}else if(type == "3"){
mui('#refreshContainer3').pullRefresh().endPullupToRefresh();
}else if(type == "4"){
mui('#refreshContainer4').pullRefresh().endPullupToRefresh();
}
}else if(res.data.data.length==0){
if(count==0){
$(".mui-pull-bottom-pocket").addClass("mui-block");
$(".mui-pull-bottom-pocket").addClass("mui-visibility");
$(".mui-pull-caption").html("暂无数据");
}else{
$(".mui-pull-loading").hide();
if(type == "1"){
hides("#refreshContainer1 .mui-pull-caption",count);
}else if(type == "2"){
hides("#refreshContainer2 .mui-pull-caption",count);
}else if(type == "3"){
hides("#refreshContainer3 .mui-pull-caption",count);
}else if(type == "4"){
hides("#refreshContainer4 .mui-pull-caption",count);
}
}
}
}
}
});
function hides(yuan,count){
if(count==0){
$(yuan).html("暂无数据");
}else{
$(yuan).html("没有更多资源了 ~");
}
}
