Heim > Web-Frontend > js-Tutorial > So rufen Sie Daten in Mui über Ajax ab und laden sie, um Paging zu erreichen

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

坏嘻嘻
Freigeben: 2018-09-13 17:11:33
Original
3310 Leute haben es durchsucht

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);
                }
            });
        }
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage