资讯列表上拉刷新

最新推荐文章于 2024-03-15 21:19:20 发布

爱喝可乐的彬仔

最新推荐文章于 2024-03-15 21:19:20 发布

阅读量3k

点赞数 1

分类专栏： JQuery JS 列表下拉刷新

本文链接：https://blog.csdn.net/qq_40999496/article/details/84372780

版权

JS 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

JQuery

5 篇文章 1 订阅

订阅专栏

列表下拉刷新

1 篇文章 0 订阅

订阅专栏

这边是手机端的页面。里面有数据循环渲染，上拉刷新数据，时间处理。

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;
        }

// //页面加载的时候，加载数据
    $(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("发生异常");
        }
    });

爱喝可乐的彬仔

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
资讯列表上拉刷新

这边是手机端的页面。里面有数据循环渲染，上拉刷新数据，时间处理。HTML&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-wi
复制链接

扫一扫

专栏目录