html上拉刷新(调用AJAX)

最新推荐文章于 2023-07-20 23:36:52 发布

hy3528

最新推荐文章于 2023-07-20 23:36:52 发布

阅读量472

点赞数

分类专栏： JQuery AJAX

本文链接：https://blog.csdn.net/hy3528/article/details/103434827

版权

JQuery 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

AJAX

3 篇文章 0 订阅

订阅专栏

引入：

    <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="//cdn.suoluomei.com/common/js2.0/dropload/v1/dropload.css" />
    <script src="//cdn.suoluomei.com/common/js2.0/dropload/v1/dropload.min.js"></script>`

注：以下代码在Script中输入
1.首先设置全局变量

var up_down = true
    var daya = []  
    var page = 1

2.创建一个页面加载事件

 $(document).ready(function () {
    }

3.将要执行的方法写在事件中

 getVoteRankingList()
 //下拉时会触发该事件
  $('.srceem').dropload({
            scrollArea: window,
            autoLoad: false,
            domDown: {
                domClass: 'dropload-down',
                domRefresh: '<div class="dropload-refresh f15"><i class="icon icon-20"></i>上拉加载更多</div>',
                domLoad: '<div class="dropload-load f15"><span class="weui-loading"></span>正在加载中...</div>',
                domNoData: '<div class="dropload-noData">没有更多了...</div>'
            },
            loadDownFn: function (me) {
                getVoteRankingList(me);
            }
        });
    });
    
function getVoteRankingList(updown) {
        if (!up_down) {
            updown.resetload();
            return false;
        }
        $.ajax({
            url: "接口",
            type: "post",
            data: {
                ac_type_id: actype,
                page: page,
                limit: 10
            },
            dataType: 'json',
            success: function (res) {

                if (typeof (updown) == 'object') {
                    updown.resetload();
                }
                   //当传来的数组长度不到10时
                  if (res.info.length <= 9) {
                    updown.noData();
                }
                // 当传来的数组长度为0时
                if (res.info.length == 0) {
                    updown.noData();
                    up_down = false
                    return false
                }


                var temp = ''
                // 将数据加入daya
                for (let i = 0; i < res.info.length; i++) {
                    daya.push(res.info[i])
                }
                $('#row').html('')
                for (let i = 0; i < daya.length; i++) {
                    temp += `             
                        <div class="list_ranking">
                        <div class="ranking"><p class="ranking_p_img" >${i + 1}</p></div>
                        <p class="list_top_p">${daya[i].id}</p>
                        <div class="participate"><img class="touxiang" src="${daya[i].picture}" alt=""><p class="namep">${daya[i].name}</p></div>
                        <div class="votes"> <p  style="color: red; font-weight: bold;">${daya[i].votes}</p><p>票</p></div>
                        </div>
                    `
                }

                if (daya.length == 0) {
                    if (typeof (updown) == 'object') {
                        // 锁定
                        updown.lock();
                        // 无数据
                        updown.noData();
                    }
                } else {
                    $('#row').html(temp)
                    page++
                    if (typeof (updown) == 'object') {
                        // 解锁
                        updown.unlock();
                    }
                }
            }
        })

4.完整代码如下（会调用ajax以及循环渲染）

<!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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="//cdn.suoluomei.com/common/js2.0/dropload/v1/dropload.css" />
    <script src="//cdn.suoluomei.com/common/js2.0/dropload/v1/dropload.min.js"></script>
    <title>榜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        body {
            background-color: #CDC0D5;
            font-size: 1rem;
        }

        .srceem {
            width: 100%;
            height: calc(100%-54px);
            position: relative;
        }

        .xong {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .boximga {
            position: absolute;
            width: 26%;
            top: 33.8%;
            transform: translate(-50%);
            left: 50%;
        }

        .boximgb {
            position: absolute;
            width: 24%;
            top: 43.1%;
            transform: translate(-50%);
            left: 18%;
        }

        .boximgc {
            position: absolute;
            width: 22%;
            top: 47.1%;
            transform: translate(-50%);
            left: 79%;
        }

        .portraita {
            position: absolute;
            width: 21.5%;
            top: 38.2%;
            left: 40.5%;
            border-radius: 50%;
            height: 18.5%;
        }

        .portraitb {
            position: absolute;
            width: 19%;
            height: 17%;
            top: 48%;
            left: 10.3%;
            border-radius: 50%;
        }

        .portraitc {
            position: absolute;
            width: 17.5%;
            height: 15%;
            top: 51.5%;
            left: 71.9%;
            border-radius: 50%;
        }

        .topa_diva {
            display: flex;
            justify-content: center;
            flex-direction: row;
            align-items: center;
            color: white;
            font-size: 1rem;
            /* flex-flow: row wrap; */
        }

        .topa {
            position: absolute;
            top: 63%;
            left: 35%;
            text-align: center;
            width: 33.33%;
        }

        .topb {
            position: absolute;
            top: 71%;
            left: 4%;
            text-align: center;
            width: 33.33%;
        }

        .topc {
            position: absolute;
            top: 73%;
            left: 63%;
            text-align: center;
            width: 33.33%;
        }

        .upper_img {
            width: 100%;
        }

        .backg {
            background-color: white;
            border-radius: 10px;
        }

        .list {
            width: 100%;
            border-radius: 10px;
        }

        .list_top {
            display: flex;
            justify-content: space-around;
            background-color: white;
            border-radius: 10px;
            line-height: 3rem;

        }

        .list_ranking {
            display: flex;
            justify-content: space-around;
            background-color: white;
            border-radius: 20px;
            line-height: 4rem;
        }

        .list_topa,
        .list_topd {
            width: 25%;
            text-align: center;
            font-weight: bold;
        }

        .list_topb {
            width: 20%;
            text-align: center;
            font-weight: bold;
        }

        .list_topc {
            width: 35%;
            text-align: center;
            font-weight: bold;
        }

        .list_top_p {
            width: 25%;
            margin: auto;
            text-align: center;
        }

        .ranking {
            width: 20%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .ranking_p_img {
            width: 25%;
            margin: auto;
            text-align: center;
        }

        .participate {
            width: 35%;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        .touxiang {
            width: 2.5rem;
            border-radius: 50%;
            height: 2.5rem;
        }

        .votes {
            width: 25%;
            display: flex;
            justify-content: center;
        }

        #row {
            border-top: 1px solid #DCDCDC;
            /* margin-bottom: 3.42rem; */
        }



        .namep {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 4rem;
        }

        .topvotesa,
        .topnumbera,
        .topvotesb,
        .topnumberb,
        .topvotesc,
        .topnumberc,
        .list_top_p,
        .ranking_p_img {
            font-weight: 550;
        }

        .topnamea,
        .topnameb,
        .topnamec {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 5rem;
            font-size: 0.8rem;
            margin: 0 auto;
        }

        .topnumbera,
        .topnumberb,
        .topnumberc {
            font-size: 0.8rem;
        }

        #winningOne {
            background: url("https://sucai.suoluomei.cn/sucai_zs/images/rank_select.png") !important;
            background-size: 100% 100% !important;
        }
    </style>
</head>

<body>
    <div class="srceem">
        <!-- 顶部前三名 -->
        <div class="xong">
            <img class="upper_img" src="https://sucai.suoluomei.cn/sucai_zs/images/20191205133709-imagelist.png" alt="">
            <!-- 背景图 -->
            <img src="https://sucai.suoluomei.cn/sucai_zs/images/20191205142421-crownone.png" alt="" class="boximga">
            <img src="https://sucai.suoluomei.cn/sucai_zs/images/20191205142509-crowntwo.png" alt="" class="boximgb">
            <img src="https://sucai.suoluomei.cn/sucai_zs/images/20191205142458-crownthree.png" alt="" class="boximgc">

            <img src="" class="portraita"> <!-- 第一名头像 -->
            <div class="topa">
                <div class="topa_diva">
                    <span class="topvotesa" style="color: red;"></span> <!-- 第一名票数 -->
                    <span style="font-size: 0.7rem;" class="ticketa">票</span>
                </div>
                <p class="topnamea"></p>
                <div class="topa_diva" style="color:white;">
                    <span class="topnumbera"></span><span style="font-size: 0.7rem;" class="ticketa">号</span>
                    <!-- 第一名号数 -->
                </div>

            </div>

            <img src="" class="portraitb"> <!-- 第二名头像 -->
            <div class="topb">
                <div class="topa_diva">
                    <span class="topvotesb" style="color: red;"></span> <!-- 第二名票数 -->
                    <span style="font-size: 0.7rem;" class="ticketb">票</span>
                </div>
                <p class="topnameb"></p>

                <div class="topa_diva" style="color:white;">
                    <span class="topnumberb"></span><span style="font-size: 0.7rem;" class="ticketb">号</span>
                    <!-- 第二名号数 -->
                </div>
            </div>

            <img src="" class="portraitc"> <!-- 第三名头像 -->
            <div class="topc">
                <div class="topa_diva">
                    <span class="topvotesc" style="color: red;"></span> <!-- 第三名票数 -->
                    <span style="font-size: 0.7rem;" class="ticketc">票</span>
                </div>
                <p class="topnamec"></p>
                <div class="topa_diva" style="color:white;">
                    <span class="topnumberc"></span><span style="font-size: 0.7rem;" class="ticketc">号</span>
                    <!-- 第三名号数 -->
                </div>
            </div>
        </div>
        <!-- 顶部前三名end -->

        <!-- 排名数据 -->
        <div class="backg">
            <div class="list">
                <div class="list_top">
                    <div class="list_topb">
                        <p>排名</p>
                    </div>
                    <div class="list_topa">
                        <p>编号</p>
                    </div>
                    <div class="list_topc">
                        <p>参与选手</p>
                    </div>
                    <div class="list_topd">
                        <p>票数</p>
                    </div>
                </div>

                <div id="row">
                </div>
            </div>
        </div>
        <!-- 排名数据end -->
    </div>
    <div style="height: 3.42rem;"></div>
</body>
<script>
    var page = 1       //页数
    var up_down = true
    var daya = []   //存后台传来的数据
    var pathname = window.location.pathname;//获取url值
    pathname = pathname.split('/')
    for (let i = 0; i < pathname.length; i++) {
        if (pathname[i] == 'actype') {
            actype = pathname[i + 1]
            break
        }
    }



    $(document).ready(function () {
        // 获取后台数据列表
        getVoteRankingList()

        $('.srceem').dropload({
            scrollArea: window,
            autoLoad: false,
            domDown: {
                domClass: 'dropload-down',
                domRefresh: '<div class="dropload-refresh f15" style="color:white"><i class="icon icon-20"></i>上拉加载更多</div>',
                domLoad: '<div class="dropload-load f15" style="color:white"><span class="weui-loading"></span>正在加载中...</div>',
                domNoData: '<div class="dropload-noData" style="color:white">没有更多了...</div>'
            },
            loadDownFn: function (me) {
                getVoteRankingList(me);
            }
        });

    });

    function getVoteRankingList(updown) {
        if (!up_down) {
            updown.resetload();
            return false;
        }
        $.ajax({
            url: "接口",
            type: "post",
            data: {
                ac_type_id: actype,
                page: page,
                limit: 10
            },
            dataType: 'json',
            success: function (res) {

                if (typeof (updown) == 'object') {
                    updown.resetload();
                }
                //当传来的数组长度不到10时
                  if (res.info.length <= 9) {
                    updown.noData();
                }
                // 当传来的数组长度为0时
              
                if (res.info.length == 0) {
                    updown.noData();
                    up_down = false
                    return false
                }

                if (page == 1) {
                     //  头部第一名
                    if (res.info[0]) {               
                        $('.portraita').attr("src", res.info[0].picture)
                        $('.topvotesa').html(res.info[0].votes)
                        $('.topnamea').html(res.info[0].name)
                        $('.topnumbera').html(res.info[0].id)
                    } else {
                        $(".boximga").css("display", "none")
                        $(".portraita").css("display", "none")
                        $(".ticketa").css("display", "none")
                    }
                    //  头部第二名
                    if (res.info[1]) {
                        $('.portraitb ').attr("src", res.info[1].picture)
                        $('.topvotesb').html(res.info[1].votes)
                        $('.topnameb').html(res.info[1].name)
                        $('.topnumberb').html(res.info[1].id)
                    } else {
                        $(".boximgb").css("display", "none")
                        $(".portraitb").css("display", "none")
                        $(".ticketb").css("display", "none")
                    }
                    //  头部第三名
                    if (res.info[2]) {
                        $('.portraitc').attr("src", res.info[2].picture)
                        $('.topvotesc').html(res.info[2].votes)
                        $('.topnamec').html(res.info[2].name)
                        $('.topnumberc').html(res.info[2].id)
                    } else {
                        $(".boximgc").css("display", "none")
                        $(".portraitc").css("display", "none")
                        $(".ticketc").css("display", "none")
                    }
                    

                }

                var temp = ''
                // 将数据加入daya
                for (let i = 0; i < res.info.length; i++) {
                    daya.push(res.info[i])
                }
                $('#row').html('')
                // console.log(daya)
                for (let i = 0; i < daya.length; i++) {
                    temp += `             
                        <div class="list_ranking">
                        <div class="ranking"><p class="ranking_p_img" >${i + 1}</p></div>
                        <p class="list_top_p">${daya[i].id}</p>
                        <div class="participate"><img class="touxiang" src="${daya[i].picture}" alt=""><p class="namep">${daya[i].name}</p></div>
                        <div class="votes"> <p  style="color: red; font-weight: bold;">${daya[i].votes}</p><p>票</p></div>
                        </div>
                    `
                }

                if (daya.length == 0) {
                    if (typeof (updown) == 'object') {
                        // 锁定
                        updown.lock();
                        // 无数据
                        updown.noData();
                    }
                } else {
                    $('#row').html(temp)
                    page++
                    if (typeof (updown) == 'object') {
                        // 解锁
                        updown.unlock();
                    }
                }
            }
        })
    }
</script>

</html>

最终效果图
在这里插入图片描述

hy3528

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html上拉刷新(调用AJAX)

引入： <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script> <link rel="stylesheet" href="//cdn.suoluomei.com/common/js2.0/dropload/v1/dropload.css" />...
复制链接

扫一扫