mui上拉加载

引入mui.min.js和mui.min.css

目录结构
页面整体代码

例子

//html
    <div id="refreshContainer" class="historical_worth">
        <table>
            <tr>
                <th>日期</th>
                <th>单位净值</th>
                <th>日涨幅</th>
            </tr>
        </table>
    </div>

         //js
        var page = 1;
        var totalPage;//总页数
        mui.init({
            pullRefresh: {
                container: '#refreshContainer',
                up: {
                    height: "50",
                    contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
                    contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
                    callback: pullupRefresh   //上拉加载的函数
                },
                down:{}
            }
        });

         /**
        * 上拉加载具体业务实现
        */
        function pullupRefresh() {
            setTimeout(function () {
                $.ajax({
                    url: "../js/mock.json",   //链接
                    data: { page: page},   // 向后台传递的参数
                    dataType: 'json',
                    type: 'get',
                    success: function (data) {
                        totalPage=data.size   //返回的总页数
                        mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
                        var html = "";
                        $.each(data.data, function (i, item) {
                            html += '<tr>'
                            html += '<td>'
                            html += item.navdate;
                            html += '</td>'
                            html += '<td>'
                            html += item.nav;
                            html += '</td>'
                            html += '<td>'
                            html += item.dayrate1;
                            html += '%</td>'
                            html += '</tr>'
                        })
                        $('.historical_worth table').append(html);
                        if (totalPage == page+1) {   // 如果总页数等于page的话就停止刷新
                            mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
                        } else {
                            page++;
                            mui('#refreshContainer').pullRefresh().refresh(true);
                        }
                    }
                })
            }, 1500);
        }

// json假数据例子

{
    "size":6
    "data":[
        {
            "navdate":"2020-8-12",
            "nav":"1.341",
            "dayrate1":"-0.23"
        },
        {
            "navdate":"2020-8-12",
            "nav":"1.320",
            "dayrate1":"1.54"
        },
        {
            "navdate":"2020-8-12",
            "nav":"1.987",
            "dayrate1":"5.64"
        }
    ]
}

如果有问题欢迎留言点赞~~~~