So rufen Sie Daten in Mui über Ajax ab und laden sie, um Paging zu erreichen

In diesem Artikel wird hauptsächlich der Kapselungsprozess des Mui-Pull-Up-Ladens erläutert, um mehr Pull-Down-Aktualisierungsdaten zu laden. Mui-Pull-Up-Laden und Pull-Down-Aktualisierung sind ähnlich und gehören zum PullRefresh-Plug-In. Freunde in Not können darauf verweisen, ich hoffe, es kann allen helfen.

上拉刷新代码

        $(document).ready(function(){

            //上拉加载下拉刷新
            mui.init({
                pullRefresh: {
                    container: '#pullrefresh',
                    down: {
                        contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
                        contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
                        contentrefresh: "正在刷新…", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
                        auto: false,//可选,默认false.首次加载自动下拉刷新一次
                        callback: pulldownRefresh
                    },
                    up: {
                        contentrefresh: '正在加载...',
                        contentnomore:'我是有底线的',
                        callback: pullupRefresh

                    }
                }
            });            /**
              * 上拉加载
              */
            function pullupRefresh() {
                setTimeout(function () {
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh((isOver)); //参数为true代表没有更多数据了。
                    getData();//ajax
                }, 500);
            }

        }); var pageStart = 0;//开始数据条数
 var pageSize = 10;//每页显示条数
 var isOver = false;//是否加载完function getData(){
            var url = requestUrl;            var _startLimit = pageStart*pageSize;//每次传入后台的数据条数，比如0  10  20 
            var $loadingToast = $('#loadingToast');
            $.ajax({
                type: "get",
                url: url,
                timeout:10000,
                data: {
                    startLimit:_startLimit
                },
                dataType: "json",
                success: function(data) {
                    console.log(data);      
                    if(data.success == true){                        var list = data.data;                        for(i in list){
                            str= "";                            //$(".contentp").append(str);
                            jQuery(str).insertBefore('#pullrefresh .mui-scroll .mui-table-view');
                        }                        //判断是否还有数据,若小于每次加载条数,结束
                        if(list.length < pageSize){
                            isOver = true;
                        }            //每次加载结束之后，如果还有数据则++
            if(isOver == false){
                pageStart++;
            }
                    }
                },
                error: function(XMLHttpRequest, textStatus, errorThrown){
                    console.log("请求失败!!！" + textStatus);                    $loadingToast.fadeOut(100);
                }
            });
        }

Verwandte Empfehlungen:

Beispiel beschreibt den Kapselungsprozess von Mui-Pull-up, um mehr Pull-down-Aktualisierungsdaten zu laden

MUI-Implementierung Teilen von Beispielen für Pull-Up-Laden und Pull-Down-Aktualisierung

Das obige ist der detaillierte Inhalt vonSo rufen Sie Daten in Mui über Ajax ab und laden sie, um Paging zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!