一个Ajax读数据并使用IScroll显示辅助类

花了2天时间对iscroll进行了一些封装，方便进行ajax读取数据和显示

1、IScroll直接使用的话还是挺麻烦的，特别是牵涉到分页加载动态加载数据时，以下是核心实现代码。

2、Loading提示，和空数据提示样式，由于篇幅限制不再粘贴，大家可以自己完善。

3、版本是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);

一个Ajax读数据并使用IScroll显示辅助类

相关推荐