一個Ajax讀數據並使用IScroll顯示輔助類

花了2天時間對iscroll進行了一些封裝，方便進行ajax讀取數據和顯示

一、IScroll直接使用的話仍是挺麻煩的，特別是牽涉到分頁加載動態加載數據時，如下是核心實現代碼。

二、Loading提示，和空數據提示樣式，因爲篇幅限制再也不粘貼，你們能夠本身完善。

三、版本是IScroll5

var UseIScrollHelper = {
    myScroll: null,  //iScroll對象
    scrollId: 'divscroll',//默認scrollid
    wrapperId: 'wrapper',//默認wrapperid
    fillList: null,  //對應的回調函數
    isMore: false,   //是否可刷新標記
    isNoData: false, //是否無數據
    isLoading: false,//是否加載數據中
    isUsePage: true,  //是否使用分頁
    headAndBottomHeight:0,    //頂部預留高度
    pageIndex: 1,
    pageSize: 10,
    url: '',
    datas: '',
    //顯示空文本提示
    checkIsScrollEmptyAndTiShi: function () {
        if ($("#" + this.scrollId).html().trim() === "") {
            this.isNoData = true;
            this.showEmptyTiShi("#" + this.scrollId, "暫無數據");
            $("#" + this.scrollId).css("min-height", "0px");
            $("#" + this.scrollId).height("");
        }
    },
    //空列表時顯示提示信息
    showEmptyTiShi: function (target, description) {
        try  {
            var tishi = "<div>無數據</div>";
            $(target).html(tishi);
        }
        catch (e) { alert(e); }
    },
    //設置ScrollHeight
    setScrollHeight: function () {
        var temp_height = 0;
        temp_height = $("#"+this.wrapperId).height();
        try {
            var showHeight = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) - this.headAndBottomHeight;
            if (temp_height !== showHeight)
                temp_height = showHeight;
        }
        catch (e) { ; };
        $("#" + this.wrapperId).height(temp_height);
        if (!this.isNoData)//有數據
        {
            $("#" + this.scrollId).css("min-height", temp_height + 1);
            $("#" + this.scrollId).height("");
        } else {//無數據
            $("#" + this.scrollId).css("min-height", 0);
            $("#" + this.scrollId).height("");
        }
        if (this.myScroll === undefined || this.myScroll === null) this.loadSroll();
        else this.myScroll.refresh();
    },
    //清空數據
    clearData: function () {
        $("#" + this.scrollId).html("");
        $("#" + this.scrollId).css("min-height", 0);
        $("#" + this.scrollId).height("");
        if (this.myScroll === undefined || this.myScroll === null) this.loadSroll();
        else this.myScroll.refresh();
    },
    //加載Iscroll
    loadSroll: function () {
        setTimeout(function (obj) {
            obj.myScroll = new IScroll("#" + obj.wrapperId, { click: true });
            obj.myScroll.on('scrollStart', function () {
                document.activeElement.blur();
            });
            obj.myScroll.on('scrollEnd', function () {
                
                if (obj.isMore === false) {
                    obj.setScrollHeight();
                    return;
                }
                if (this.y <= this.maxScrollY) {
                    if (obj.isMore === false) {
                        obj.setScrollHeight();
                        this.refresh();
                        return;
                    }
                    if (obj.getData !== null) {
                        obj.getData();
                    }
                    this.refresh();
                } else {
                    this.refresh();
                }
            });
        }, 100,this);
    },
    //從服務端讀數據
    getData: function () {
        try {
            if (this.isLoading) return;
            if (this.isNoData) return;
            this.isLoading = true;
            var obj = this;
            var url = this.url;
            //有分頁標誌才啓用分頁參數
            if (this.isUsePage) {
                url = url + "&pageIndex=" + this.pageIndex + "&pageSize=" + this.pageSize;
            }
            $.ajax({
                url: url, 
                type: "post",
                dataType: "json",
                data: this.datas,
                success: function (p_datas) {
                    bhttooler.nologinDeal(p_datas);
                    if (p_datas[0].result === "success") {
                        if (obj.fillList !== null)
                            obj.fillList(p_datas[0].datas);
                        if (obj.isUsePage) {//有分頁標誌進行判斷
                            if (p_datas[0].isMore === "True") {
                                obj.pageIndex = obj.pageIndex + 1;
                                obj.isMore = true;
                            } else {
                                obj.isMore = false;
                            }
                        }
                    }
                    obj.checkIsScrollEmptyAndTiShi();
                    bhttooler.hideLoadding();
                    obj.setScrollHeight();
                    obj.isLoading = false;
                },
                fail: function () {
                    obj.checkIsScrollEmptyAndTiShi();
                    obj.setScrollHeight();
                    obj.isLoading = false;
                }
            });
        }
        catch (e) {
            this.checkIsScrollEmptyAndTiShi();
            this.setScrollHeight();
            this.isLoading = false;
        }

    }

};

前臺示例使用方法：

<div id="celltemplate" style="display:none">
     <div class="weui-cells">
        <a class="weui-cell weui-cell_access" href="#">
            <div class="weui-cell__hd ">
                #title#
            </div>
        </a>
    </div>
</div>

 

<div class="page tabbar js_show">
        <div class="page__bd" style="height: 100%;">
            <div class="weui-tab">
                <div class="weui-tab__panel" style="padding-bottom: 0px;">
                    <div id="wrapper" >
                        <div id="divscroll">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

 window.onload = function () {
            mobanhtml = $('#celltemplate').html();
            UseIScrollHelper.fillList = FillList;
            UseIScrollHelper.url = "XXXXXXXXXXXXXXXX";
            UseIScrollHelper.datas = "";
            UseIScrollHelper.getData();
        }
        function FillList(listdata) {
            
            for (var i = 0; i < listdata.length; i++) {
            var datas = listdata[i];
                var inserthtml = mobanhtml
                    .replace("#title#", datas.title)
                $('#divscroll').append(inserthtml);
            }
        }

 

#wrapper {
    overflow: hidden;
    position:relative;
}
/*必須設置爲absolute否則會遮擋一部分*/
#divscroll {
    position: absolute;
    width: 100%;

}

若是一個頁面有多個IScroll，請使用如下代碼生成實例

var renYuanScroller = Object.create(UseIScrollHelper);

後臺返回數據代碼（C#示例)。

 string strJson = "\"datas\":" + Newtonsoft.Json.JsonConvert.SerializeObject(dtTemp, new Newtonsoft.Json.Converters.DataTableConverter());
 string Json = "[{\"result\":\"success\",\"isMore\":\"" + isMore + "\"," + strJson + "}]";
 Response.Write(Json);