mui上拉加载分页

最新推荐文章于 2024-05-16 00:19:21 发布

太阳的后裔

最新推荐文章于 2024-05-16 00:19:21 发布

阅读量220

点赞数

分类专栏： mui js C#

本文链接：https://blog.csdn.net/weixin_43942765/article/details/106937201

版权

C# 同时被 3 个专栏收录

69 篇文章 0 订阅

订阅专栏

60 篇文章 3 订阅

订阅专栏

mui

4 篇文章 0 订阅

订阅专栏

不多说直接上代码
HTML部分

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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" />
    <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
    <title>报销列表</title>
    <link href="../boostrap/bootstrap.css" rel="stylesheet" />
    <script src="../dist/Model/jquery-2.1.4.js"></script>
    <link href="../dist/Model/weui.min.css" rel="stylesheet" />
    <link href="../dist/Model/jquery-weui.css" rel="stylesheet" />
    <link href="../dist/Model/demos.css" rel="stylesheet" />
    <link href="../ExceptionTalk/css/mui.min.css" rel="stylesheet" />
    <script src="../ExceptionTalk/js/mui.min.js"></script>
    <script src="../dist/Model/jquery-2.1.4.js"></script>
    <script src="../dist/Model/fastclick.js"></script>
    <script src="../dist/Model/jquery-weui.js"></script>
    <script src="../js/MUI/PullToRefresh/mui.pullToRefresh.js"></script>
    <script src="../js/MUI/PullToRefresh/mui.pullToRefresh.material.js"></script>
</head>
<body>
    <div class="mui-content">
        <div id="slider" class="mui-slider mui-fullscreen">
            <div class="mui-slider-group">
                <div id="item1mobile" class="md-f1 mui-slider-item mui-control-content detailInfos md-box md-ver mui-active">
                    <div id="scroll1" class="mui-scroll-wrapper">
                        <div class="mui-scroll">
                            <ul id="CCJLUl" class="mui-table-view"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/MyCostList.js"></script>
</body>
</html>

JS部分

var uid = "";
mui.init({
    swipeBack: false,
    gestureConfig: {
        tap: true//默认为false
    }
});
//加载报销列表
function QueryOutCar() {
    var temp = document.getElementById("CCJLUl");
    var slength = temp.getElementsByTagName("li").length / 2;
    var spg = Math.ceil(slength / 10);
    var fragment = document.createDocumentFragment();
    if (slength < spg * 10) {
        isOver = true;
        mui('#scroll1').pullRefresh().endPullupToRefresh(true);
        $(".mui-pull-bottom-pocket").css("visibility", "visible");
    } else {
        var length = temp.getElementsByTagName("li").length / 2;
        var Pg = Math.ceil(length / 10) + 1;//分页

        isOver = false;
        mui('#scroll1').pullRefresh().endPullupToRefresh(false); //停止正在加载
        mui('#scroll1').pullRefresh().enablePullupToRefresh(); //显示上拉加载文字
        $.ajax({
            async: false, type: "get", url: "Handler.ashx?action=OtherFeeBaoList",
            data: { Page: Pg, rows: 10, uid: uid }, dataType: "text",
            success: function (res) {
                res = JSON.parse(res);
                for (var i = 0; i < res.length; i++) {
                    var li = document.createElement("li");
                    li.className = 'mui-table-view-cell';
                    li.id = res[i].uid + "_" + res[i].id;
                    if (res[i].returninuser != "") {
                        if (res[i].img != "") {
                            li.innerHTML = "<li id='" + res[i].uid + "_" + res[i].id + "' class='mui-table-view-cell' style='background-color: #C0CC33; margin-top: 5px; border-radius: 2px;' ><div class='mui-table'><div class='mui-table-cell mui-col-xs-12'><p class='mui-h5 mui-ellipsis' style='color: #000000;'>编号：" + res[i].uid + " &ensp;操作人：" + res[i].Inuser + "</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>金额：" + res[i].Money + "&ensp;状态：已上传发票</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>内容：" + res[i].NC + "</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>操作时间：" + res[i].Indate + "</p></div></div></li>";
                            li.addEventListener('tap', function (event) {
                                var oID = this.getAttribute("id");
                                location.href = "ClaimbackDetail.html?oID=" + oID + "&type=杂费报销";
                            })
                        } else {
                            li.innerHTML = "<li id='" + res[i].uid + "_" + res[i].id + "' class='mui-table-view-cell' style='background-color: #00fB90; margin-top: 5px; border-radius: 2px;' ><div class='mui-table'><div class='mui-table-cell mui-col-xs-12'><p class='mui-h5 mui-ellipsis' style='color: #000000;'>编号：" + res[i].uid + " &ensp;操作人：" + res[i].Inuser + "</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>金额：" + res[i].Money + "&ensp;状态：未上传发票</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>内容：" + res[i].NC + "</p><p class='mui-h5 mui-ellipsis' style='color: #000000;'>操作时间：" + res[i].Indate + "</p></div></div></li>";
                            li.addEventListener('tap', function (event) {
                                var oID = this.getAttribute("id");
                                location.href = "ClaimbackDetail.html?oID=" + oID + "&type=杂费报销";
                            })
                        }
                    }
                    fragment.appendChild(li);
                }
            }
        });
        temp.appendChild(fragment);
        var atemp = document.getElementById("CCJLUl");
        var alength = atemp.getElementsByTagName("li").length / 2;
        var apg = Math.ceil(alength / 10);
        if (alength < apg * 10) {
            isOver = true;
            mui('#scroll1').pullRefresh().endPullupToRefresh(true);
            $(".mui-pull-bottom-pocket").css("visibility", "visible");
        }
    }
}
//获取传过来的参数
function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return decodeURIComponent(r[2]);
    }
    return '';
}

mui('#scroll1').pullRefresh({
    container: '#scroll1',
    up: {
        height: 50,
        auto: false,
        contentrefresh: "正在加载...",
        contentnomore: "没有更多数据了",
        callback: userPullupRefresh
    }
});

function userPullupRefresh() {
    setTimeout(function () {
        mui('#scroll1').pullRefresh().endPullupToRefresh((isOver)); //参数为true代表没有更多数据了。
        QueryOutCar();
    }, 1500);
}

(function ($) {
    uid = getQueryString('uid');
    QueryOutCar();
    //阻尼系数
    var deceleration = mui.os.ios ? 0.003 : 0.0009;
    $('.mui-scroll-wrapper').scroll({
        bounce: false,
        indicators: true, //是否显示滚动条
        deceleration: deceleration
    });
})(mui);

C# (handler.ashx.cs文件)

/// <summary>
/// 杂费报销列表
/// </summary>
/// <param name="context"></param>
public void OtherFeeBaoList(HttpContext context)
{
    int page = Convert.ToInt32(context.Request["Page"]);
    int rows = Convert.ToInt32(context.Request["rows"]);
    string uid = context.Request["uid"].ToString();
    HttpCookie cookie = context.Request.Cookies["inopenid"];

    string openId = "";
    string url = MyConvert.MyUrlCode(context.Request.Url, encode);

    if (url.IndexOf("http://localhost") > -1)
    {
        openId = "oH5RduKE74qVHzvyooJaV2EYhPFg";
    }
    else
    {
        openId = cookie.Value;//
    }
    string name = CommonClass.getName(openId);

    //明细表  Tbl_OtherFeeBaoList
    int index = rows * page;
    List<Expense.Model.OtherFeeBaoList> lists = new List<Expense.Model.OtherFeeBaoList>();
    if (name != "")
    {
        //string selSQL = "select top " + index + " id,uid,Money,NC,Inuser,Indate from Tbl_OtherFeeBaoList where uid ='" + uid + "' order by Indate desc ";
        //string selSQL = "select * from (select row_number() over(order by t.Indate desc) as rn,t.id,t.uid,t.Money,t.NC,t.Inuser,t.Indate from Tbl_OtherFeeBaoList t where t.uid='" + uid + "') d where d.rn between " + (index-9) + " and " + index + "";
        string selSQL = "select * from (select row_number() over(order by t.Indate desc) as rn,t.id,t.uid,t.Money,t.NC,t.Inuser,t.Indate,b.img from Tbl_OtherFeeBaoList as t left join Tbl_InvoicePic as b on t.id=b.pid where t.uid='" + uid + "') d where d.rn between " + (index - 9) + " and " + index + "";
        DataTable dt = DBL.DbHelperSQL.QueryDataTable(0, selSQL);
        foreach (DataRow idr in dt.Rows)
        {
            lists.Add(new Expense.Model.OtherFeeBaoList
            {
                id = Convert.ToInt32(idr["id"]),
                uid = Convert.ToDecimal(idr["uid"]),
                Money = Convert.ToDecimal(idr["Money"]),
                NC = Convert.ToString(idr["NC"]),
                Indate = Convert.ToString(idr["Indate"]),
                Inuser = Convert.ToString(idr["Inuser"]),
                img=Convert.ToString(idr["img"])
            });
        }
    }
    else
    {
        lists.Add(new Expense.Model.OtherFeeBaoList
        {

        });
    }
    JavaScriptSerializer js = new JavaScriptSerializer();
    context.Response.Write(js.Serialize(lists));
}