这边是手机端的页面。里面有数据循环渲染,上拉刷新数据,时间处理。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>直播列表</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="divContainer">
<ul class="liveListContainer"></ul>
</div>
<div class="tipContainer" style="display: none">
<div class="tip">
没有更多的数据了
<span class="closeTip">×</span>
</div>
</div>
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 10 * (clientWidth / 320) + 'px';// 用边缘值代入 50*(640/320)px=100px;
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
CSS
/*通用 CSS :大部分元素具备的样式*/
body{
font:12px "microsoft yahei",Arial,Helvetica,sans-serif;
color:#000304;
margin:0;
background-color: #fff;
}
p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd{
margin:0;
padding:0;
list-style:none;
}
img{
vertical-align:middle;
border: none;
}
a{
color:#000304;
text-decoration:none;
}
a:hover{
text-decoration:none;
}
a:focus{
text-decoration:none;
}
.lf{float:left;}
.rt{float:right;}
.clear{
clear: both;
}
.clear:after{
content: ' ';
display: table;
clear: both;
}
.divContainer{
height: 100%;
overflow-y: scroll;
}
.liveListContainer li{
margin-top: 0.8rem;
}
.liveListContainer li:first-child{
margin-top: 0;
}
.liveList,.liveListImg{
width: 100%;
height: 16rem;
}
.liveList{
position: relative;
}
.liveListBg{
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.25);
}
.liveListTitle{
font-size: 1.5rem;
color: #fff;
position: absolute;
top: 8.5rem;
}
.liveListDetail{
font-size: 1.1rem;
color: #fff;
position: absolute;
top: 13rem;
}
.detailTitle{
width: 7rem;
height: 2rem;
text-align: center;
line-height: 2rem;
margin-left: 2rem;
letter-spacing: 2px;
background-color: #1E90FF;
border-radius: 1rem;
}
.detailNumber,.detailTime{
line-height: 2rem;
margin-left: 1.5rem;
}
.tipContainer{
width: 100%;
height: 100%;
overflow: hidden;
background: rgba(0, 0, 0, 0.45);
position: fixed;
top: 0;
left: 0;
}
.tip{
width: 70%;
height: 6rem;
line-height: 6rem;
text-align: center;
font-size: 1.5rem;
letter-spacing: 2px;
background-color: #fff;
margin: auto;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.closeTip{
display: block;
height: 2.5rem;
line-height: 2.5rem;
font-size: 2rem;
position: absolute;
top: 0;
right: 0.3rem;
}
JS
// //页面加载的时候,加载数据
$(document).ready(function(){
var page = 1;
GetData(page);
pullFn(page);
});
//请求数据函数
function GetData(page) {
$.ajax({
type : 'GET',
url :'后台数据链接?page='+page,
dataType:"json",
data: {},
success:function (data) {
console.log(data.Body);
var listData = data.Body;
//判断是否有数据
if(listData.length === 0){
$(".tipContainer").css("display","block");
}else{
var today = new Date();
//根据数据的个数生成li
for(var i=0;i<listData.length;i++){
var imgPath = String(listData[i].themePic);
var listTitle = String(listData[i].name);
var number = String(listData[i].sNum);
var listUrl = String(listData[i].url);
var time = String(listData[i].beginDate.replace(/-/g, "/"));//兼容IOS
var date = String(timeDate(today,time));
$(".liveListContainer").append(`
<li class="liveList">
<a href="${listUrl}" class="liveListBg"></a>
<img class="liveListImg" src="${imgPath}" alt="">
<div class="liveListTitle">${listTitle}</div>
<div class="liveListDetail clear">
<div class="lf detailTitle">直播回顾</div>
<div class="lf detailNumber"><span>${number}</span>人参与</div>
<div class="lf detailTime">${date}</div>
</div>
</li>
`)
}
}
},
error:function(data){
console.log("发生异常");
}
});
}
//处理时间函数
function timeDate(today,time) {
// 现实时间
var realtime = today.getTime(); //获取UTC格式的从1970.1.1 0:00以来的毫秒数
var realyear = today.getFullYear();
//资讯时间
var newtime = Date.parse(time); //获取UTC格式的从1970.1.1 0:00以来的毫秒数
var newDate = new Date(newtime);
var newyear = newDate.getFullYear();
// 计算天数
var day = Math.round((realtime - newtime) / (1000 * 60 * 60 * 24));
// 计算小时
var hour = parseInt((realtime - newtime) / (1000 * 60 * 60));
// 计算分钟
var minutes = parseInt((realtime - newtime) / (1000 * 60));
// 判断年
if (realyear - newyear !== 0 && day > 365) {
return (realyear - newyear) + "年前"
} else if (day !== 0) { //判断天
if (day === 1) {
return "昨天"
} else if (day > 0 && day <= 6) {
return day + "天前"
} else if (day >= 7 && day < 30) { //判断周
return (Math.ceil(day / 7)) + "周前"
} else if (day >= 30 && day < 365) { //判断月
return (Math.ceil(day / 30)) + "月前"
}
} else if (day === 0 && hour !== 0) { //判断小时
if (hour > 0 && hour < 24) {
return hour + "小时前"
}
} else if (day === 0 && hour === 0 && minutes !== 0) { //判断分钟
if (minutes > 0 && minutes < 60) {
return minutes + "分钟前"
}
} else if (day === 0 && hour === 0 && minutes === 0) {
return "刚刚"
}
}
//上拉刷新
function pullFn(page) {
$("body").css("height",$(window).height());
$(".divContainer").scroll(function () {
var li = $(".liveListContainer>li:last-child");
var distance = Math.ceil(Math.ceil(li.offset().top)-$(window).scrollTop());
var liHeight = Math.ceil(li.outerHeight(true));
var addNumber = liHeight - Math.ceil(li.outerHeight())+1;
var windowHeight = $(window).height()+addNumber;//加addNumber是为了抵消margin-top
if((distance+liHeight)<=windowHeight){
console.log("刷新");
page++;
GetData(page);
}
})
}
//关闭tip
$(".closeTip").click(function () {
$(".tipContainer").css("display","none");
});
ajax跨域请求的解决方法:
$.ajax({
type : 'GET',
async:false,
cache: false,
url :'',
dataType:"jsonp",
jsonp:"callback", //这里定义了callback的参数名称,以便服务获取callback的函数名即lishuicallback_result
jsonpCallback:"lishuicallback_result", //这里定义了jsonp的回调函数
data: {},
success:function (data) {
},
error:function(data){
console.log("发生异常");
}
});