<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../js/rem.js"></script>
<link rel="stylesheet" href="../css/mui.min.css">
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/cc.css">
</head>
<body>
<div class="g my-love">
<!--头部-->
<header class="header">
<a href="#"> <span class="mui-icon mui-icon-arrowleft arrowleft fl"></span></a>
<a class="tx-center" href="#">我的收藏</a>
<a href="#"></a>
</header>
<!--头部end-->
<!--选项卡-->
<div class="tab">
<span class="active">线路</span>
<span>供应商店铺</span>
<div class="line"></div>
</div>
<!--选项卡end-->
<!--列表-->
<div class="listitem">
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper w-list">
<div class="mui-scroll">
<!--数据列表-->
<div class="listitem-content">
<ul class="table-view mui-table-view-chevron">
<!--li项目-->
<a href="#">
<li class="view-cell clearfix">
<div class="fl line-itemL">
<div class="line-itemimg">
<img src="../images/dingdan_img_1.png" />
<p>上海出发</p>
</div>
</div>
<div class="fl line-itemR">
<h3 class="txt-cut">游轮盛宴世纪皇冠系列五香游船畅游游轮盛宴世纪皇冠系列畅游游轮盛宴世纪皇冠系列畅游游轮盛宴世纪皇冠系列五香游船...</h3>
<p class="one-txt-cut">最近团期：07-08、07-09、07-11、07-12…</p>
<div class="lineprice"><span>￥<em>5999</em></span>起</div>
</div>
</li>
</a>
<div class="linecancer clearfix"><span class="fr cancer-love">取消收藏</span></div>
<!--li项目end-->
<!--li项目-->
<a href="#">
<li class="view-cell clearfix">
<div class="fl line-itemL">
<div class="line-itemimg">
<img src="../images/dingdan_img_1.png" />
<p>上海出发</p>
</div>
</div>
<div class="fl line-itemR">
<h3 class="txt-cut">游轮盛宴世纪皇冠系列五香游船畅游游轮盛宴世纪皇冠系列畅游游轮盛宴世纪皇冠系列畅游游轮盛宴世纪皇冠系列五香游船...</h3>
<p class="one-txt-cut">最近团期：07-08、07-09、07-11、07-12…</p>
<div class="lineprice"><span>￥<em>5999</em></span>起</div>
</div>
</li>
</a>
<div class="linecancer clearfix"><span class="fr cancer-love">取消收藏</span></div>
<!--li项目end-->
<!--li项目-->
<a href="#">
<li class="view-cell clearfix">
<div class="fl line-itemL">
<div class="line-itemimg">
<img src="../images/dingdan_img_1.png" />
<p>上海出发</p>
</div>
</div>
<div class="fl line-itemR">
<h3 class="txt-cut">游轮盛宴世纪皇冠系列五香游船畅游游轮盛宴世纪皇冠系列畅游游轮盛宴世纪皇冠系列畅游游轮盛宴世纪皇冠系列五香游船...</h3>
<p class="one-txt-cut">最近团期：07-08、07-09、07-11、07-12…</p>
<div class="lineprice"><span>￥<em>5999</em></span>起</div>
</div>
</li>
</a>
<div class="linecancer clearfix"><span class="fr cancer-love">取消收藏</span></div>
<!--li项目end-->
</ul>
</div>
</div>
</div>
<!--下拉刷新容器end-->
</div>
<!--列表end-->
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/jquery.min.js"></script>
<script>
var pageindex =0; //此处提供页的索引
var canDown =1; //此处提供数据，当有数据时，提供参数大于0的数，当没有数据时提供小于0的数
mui.init({
swipeBack: true //启用右滑关闭功能
});
mui.init({
pullRefresh: {
container: '#pullrefresh',
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
mui('body').on('tap','a',function(){document.location.href=this.href;});
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
var index=pageindex+1;
mui.ajax({
type: "post",
url: "take.ajaxtake.html",
data: 'p='+index,
dataType: "json",
timeout: 1000,
complete :function(){
},
success: function(data){
canDown=data.surplus;
mui('#pullrefresh').pullRefresh().endPullupToRefresh((canDown<0));//参数为true代表没有更多数据了。
pageindex++;
var table = document.body.querySelector('.table-view');
var cells = document.body.querySelectorAll('.view-cell');
var str="";
for(var i=0;i<data.datas.length;i++){
var li = document.createElement('li');
li.className = 'bg-white';
str= '<a href="#"><li class="view-cell clearfix">'+
'<div class="fl line-itemL">'+
' <div class="line-itemimg">'+
' <img src="../images/dingdan_img_1.png" />'+
' <p>上海出发</p>'+
'</div>'+
'</div>'+
'<div class="fl line-itemR">'+
'<h3 class="txt-cut">游轮盛宴世纪皇冠系列五香游船畅游游轮盛宴世纪皇冠系列畅游游轮盛宴世纪皇冠系列畅游游轮盛宴世纪皇冠系列五香游船...</h3>'+
'<p class="one-txt-cut">最近团期：07-08、07-09、07-11、07-12…</p>'+
'<div class="lineprice"><span>￥<em>5999</em></span>起</div>'+
'</div>'+
'</li></a>'+
'<div class="linecancer clearfix"><span class="fr cancer-love">取消收藏</span></div>';
li.innerHTML = str;
table.appendChild(li);
}
},
error: function() {
console.log("请求数据失败");
}
});
}, 1500);
}
//以下是jquery代码
$(function(){
//选项卡
$(".tab").find("span").click(function(){
var _$this=$(this);
var $w=_$this.width();
var $index=_$this.index();
$(".tab").find("span").removeClass("active");
_$this.addClass("active");
_$this.siblings(".line").animate({
"left":$w*$index+"px"
},200)
});
//取消收藏
$ (".cancer-love").on("tap",function(){//此处用tap,触屏事件
var btnArray = ['是', '否'];
mui.confirm('确定取消收藏吗？', '取消收藏', btnArray, function(e) {
if (e.index != 1) {
console.log("是")
} else {
console.log("否")
}
});
});
})
</script>
</body>
</html>
欢迎star我的github
