h5使用jquery-weui来实现下拉刷新和上滑分页(并没有实现保存浏览位置的功能)

最新推荐文章于 2022-11-20 10:23:33 发布

不急god

最新推荐文章于 2022-11-20 10:23:33 发布

阅读量879

点赞数

分类专栏：前端ajax web

本文链接：https://blog.csdn.net/sdzhangshulong/article/details/107688200

版权

web 同时被 2 个专栏收录

11 篇文章

订阅专栏

前端ajax

9 篇文章

订阅专栏

html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>首页</title>
    <link rel="stylesheet" href="${ctxPath}/assets/familyApp/css/common.css">
    <link rel="stylesheet" href="${ctxPath}/assets/familyApp/css/list.css">
    <link rel="stylesheet" href="${ctxPath}/assets/familyApp/css/jquery-weui.css">
    <script src="${ctxPath}/assets/familyApp/js/jquery-1.8.3.min.js"></script>
    <script src="${ctxPath}/assets/familyApp/js/common.js"></script>


</head>
<body class="bgGray" style="overflow: hidden">


<header class="topBg">
    <a href="${ctxPath}/familyApp/index"><img class="back" width="12" src="${ctxPath}/assets/familyApp/images/back.png" alt=""></a>
    红黑榜
</header>

<!--内容-->
<div class="content" id="page-ptr" style="overflow-y: auto">
    <div class="weui-pull-to-refresh-layer">
        <div class="pull-to-refresh-arrow"></div>
        <div class="pull-to-refresh-preloader"></div>
        <div class="down">下拉刷新</div>
        <div class="up">释放刷新</div>
        <div class="refresh">正在刷新...</div>
    </div>
    <ul class="listBox" id="listBox">
        <li>
            <a href="listDetail.html">
                <div>
                    <img src="${ctxPath}/assets/familyApp/images/date.png" alt="">
                    <span class="time">2020-04-20</span>
                </div>
                <span class="single text">溪亭镇开展复学学校食堂食品安全检查...</span>

            </a>
        </li>
    </ul>
    <div id="list">

    </div>
    <div class="weui-infinite-scroll" >
        <div class="infinite-preloader"></div><!-- 菊花  style="display:none"  $("#div").attr("style","display:block");
$("#div").attr("style","display:none");-->
        正在加载... <!-- 文案，可以自行修改 -->
    </div>
</div>

<script type="text/javascript">
    var Feng = {
        ctxPath: "",
        addCtx: function (ctx) {
            if (this.ctxPath === "") {
                this.ctxPath = ctx;
            }
        }
    };
    Feng.addCtx("${ctxPath}");
</script>
<script src="${ctxPath}/assets/familyApp/js/jquery-weui.js"></script>
<script src="${ctxPath}/assets/familyApp/js/refreshLoad.js"></script>
</body>
</html>

js页面

/**
 * Created by 桃子 on 2020/7/29.
 */


var limit = 8;//每页数据条数
var loading = false;  //状态标记
var page = 1;
var maxpage;
$(function () {

    /**
     * 页面初始化
     * @type {string | null}
     */

    ajaxpage(1);


    //绑定下拉刷新事件
    if ($("#page-ptr")[0]) {
        $("#page-ptr").pullToRefresh().on("pull-to-refresh", function () {
            $('#page-ptr').infinite()
            $('.weui-infinite-scroll').show().html("正在加载...");
            console.log("进入下拉刷新功能");

            //重置参数
            limit = 15;//每页数据条数
            loading = false;  //状态标记
            page = 1;
            var queryData = {};
            queryData['page'] = page;
            queryData['limit'] = limit;
            $.ajax({
                url: Feng.ctxPath + '/billbardred/listForApp',
                data: queryData,
                dataType: 'json',
                type: 'post',
                success: function (data) {

                    //下拉刷新时,清空内容列表
                    $("#listBox").empty();
                    $.each(data.data, function (i, item) {
                        $("#listBox").append('<li>\n' +
                            '        <a href="listDetail.html">\n' +
                            '            <div>\n' +
                            '                <img src="' + Feng.ctxPath + '/assets/familyApp/images/date.png" alt="">\n' +
                            '                <span class="time">' + item.createDate.substring(0, 10) + '</span>\n' +
                            '            </div>\n' +
                            '            <span class="single text">' + item.bTitle + '</span>\n' +
                            '            \n' +
                            '        </a>\n' +
                            '    </li>');
                    });

                    maxpage = Math.ceil(data.count / limit); //总数除以每页的条数

                    if (page == maxpage) {
                        $('#page-ptr').destroyInfinite();
                        $('.weui-infinite-scroll').show().html("没有更多数据了");
                    }

                }
            })


            setTimeout(function () {
                $("#page-ptr").pullToRefreshDone(); // 重置下拉刷新
            }, 1000);   //模拟延迟
        });
    }


    //上滑加载
    $('#page-ptr').infinite().on("infinite", function () {

        if (loading) return;
        loading = true;
        if (page < maxpage) {
            page++;
            ajaxpage(page);
        }
        loading = false;
    });

});


function ajaxpage(page) {
    var queryData = {};
    queryData['page'] = page;
    queryData['limit'] = limit;
    $.ajax({
        type: "post",
        url: Feng.ctxPath + '/billbardred/listForApp',
        data: queryData,
        dataType: 'json',
        beforeSend: function (xhr) {
            $('.weui-infinite-scroll').show();
        },
        success: function (rs) {
            $('.weui-infinite-scroll').hide();
            $.each(rs.data, function (i, item) {
                $("#listBox").append('<li>\n' +
                    '        <a href="listDetail.html">\n' +
                    '            <div>\n' +
                    '                <img src="' + Feng.ctxPath + '/assets/familyApp/images/date.png" alt="">\n' +
                    '                <span class="time">' + item.createDate.substring(0, 10) + '</span>\n' +
                    '            </div>\n' +
                    '            <span class="single text">' + item.bTitle + '</span>\n' +
                    '            \n' +
                    '        </a>\n' +
                    '    </li>');
            });

            maxpage = Math.ceil(rs.count / limit); //总数除以每页的条数

            if (page == maxpage) {
                $('#page-ptr').destroyInfinite();
                $('.weui-infinite-scroll').show().html("没有更多数据了");
            }
        },
        error: function (xhr) {
            alert('ajax出错');
        },
    });
}

/**
 * 暂时先不保留滑块位置
 */
/*//一进入界面就进行判断，如果l为null或者空的时候就会执行ajax，并加载第一页的数据，如果不会空就会读取sessionStorage的数据
var l = sessionStorage.getItem('index_list');
if (null !== l && '' !== l) {
    $("#rank-list").html(l);
    $(window).scrollTop(sessionStorage.getItem('index_scroll'));//getItem读取上次存的页面位置
    page = sessionStorage.getItem('index_page');
    //清空存储的列表数据、存储页码、存储滚动条位置
    sessionStorage.removeItem('index_list');
    sessionStorage.removeItem('index_page');
    sessionStorage.removeItem('index_scroll');
} else {
    ajaxpage(1);
}

const goto = (id) => {  //es6箭头函数  当点击列表查看详情的时候就会将列表数据和页码、滚动条位置都存储下来
    sessionStorage.setItem('index_list', $("#rank-list").html());//存储列表数据
    sessionStorage.setItem('index_page', page);//存储页码
    sessionStorage.setItem('index_scroll', $(window).scrollTop());//存储滚动条位置
    location.href = "js91.html?id=" + id;
}*/