pullrefresh 默认下拉会触发两次下拉操作

分类：MUI

mui的上拉下拉刷新问题，如果设置第一次为默认下拉，总是会触发两次下拉，请问有谁遇到么？```javascript
;define(function(require, exports, module) {
require("mui");
var araleClass = require("arale-class");
var appAjax = require("app-ajax");
var artTemplate = require("artTemplate");

/**  
 * 默认参数设置  
 */  
var DEFAULT_OPTIONS = {  

    // 服务的地址  
    service      : "",  

    // 模板的标志  
    templateId   : "",  

    // 模板内容，当templateId为空时，取这个值  
    templateSource: '',  

    // 数据为空的模板标识  
    nullTemplateId: '',  

    // 列表的标志  
    listId       : "",  

    // 每页取的数据大小  
    size         : 20,  

    // 传参对象  
    data         : null,  

    // 是否需要本地缓存  
    needCache    : false  
};  

/**  
 * 获取下拉提交的参数  
 * @param {Object} size  
 * @param {Object} data  
 */  
var _getDownParams = function(size, data) {  

    var downParams = {  
        page : {  
            lastdate : 0,  
            size : size,  
            type : 'AFTER'  
        }  
    };  

    mui.extend(true, downParams, data);  

    return downParams;  
};  

/**  
 * 获取上拉提交的参数  
 * @param {Object} size  
 * @param {Object} data  
 */  
var _getUpParams = function(size, data) {  
    var upParams = {  
        page : {  
            lastdate : 0,  
            size : size,  
            type : 'BEFORE'  
        }  
    };  
    mui.extend(true, upParams, data);  

    return upParams;  
};  

/**  
 * 显示空界面  
 * @param {Object} container  
 * @param {Object} nullTemplateId  
 */  
var _showNull = function(container, nullTemplateId) {  
    document.body.querySelector(container + ' .mui-scroll').innerHTML = artTemplate(nullTemplateId, {});  
};  

/**  
 * 渲染表单  
 * @param {Object} options  
 * @param {Object} data  
 * @param {Object} down 是否下拉  
 */  
var _renderTable = function(options, data, down) {  
    // 表单渲染  
    var table = document.body.querySelector(options.container + ' .mui-table-view');  

    if (!table) {  
        var ulHtml = '<ul class="mui-table-view mui-table-view-chevron"></ul>';  
        document.body.querySelector(options.container + ' .mui-scroll').innerHTML = ulHtml;  
        table = document.body.querySelector(options.container + ' .mui-table-view');  
    }  

    var html = '';  
    if (options.templateId && options.templateId.length > 0) {  
        html = artTemplate(options.templateId, {datalist: data});  
    } else {  
        var render = artTemplate.compile(options.templateSource);  
        html = render({datalist:data});  
    }  

    if (down) {  
        //下拉刷新，新纪录插到最前面  
        table.innerHTML = html + table.innerHTML;  
    } else{  
        //上拉加载更多，新纪录插到最后面  
        table.innerHTML = table.innerHTML + html;  
    }  

};  

/**  
 * 下拉刷新事件  
 */  
var _downFunc = function(that) {  

    appAjax.postJson({  
        service : that.options.service,  
        data    : that.downParams,  
        success : function(data){  
            var container = that.options.container;  
            if(data && data.length > 0){  
                that.downParams.page.lastdate = data[0]["lastdate"];  

                // 如果是第一次加载数据  
                if (that.upParams.page.lastdate == 0) {  
                    that.upParams.page.lastdate = data[data.length-1]["lastdate"];  
                }  

                that.firstLoadData = false;  

                // 表单渲染  
                _renderTable(that.options, data, true);  

                // 结束刷新  
                mui(container).pullRefresh().endPulldownToRefresh(); //refresh completed  
            } else {  
                if (that.firstLoadData) {  
                    // 第一次加载数据，显示空界面  
                    _showNull(container, that.options.nullTemplateId);  
                } else{  
                    that.firstLoadData = false;  
                    mui.toast("当前已是最新数据");  
                }  
                // 结束刷新  
                mui(container).pullRefresh().endPulldownToRefresh(); //refresh completed  
            }  
        }  
    });  

};  

/**  
 * 上拉加载事件  
 */  
var _upFunc = function(that) {  

    appAjax.postJson({  
        service : that.options.service,  
        data    : that.upParams,  
        success : function(data){  
            var container = that.options.container;  
            if(data && data.length > 0){  
                that.upParams.page.lastdate = data[data.length-1]["lastdate"];  

                // 如果是第一次加载数据  
                if (that.downParams.page.lastdate == 0) {  
                    that.downParams.page.lastdate = data[0]["lastdate"];  
                }  

                that.firstLoadData = false;  

                // 表单渲染  
                _renderTable(that.options, data, false);  

                // 结束刷新  
                mui(container).pullRefresh().endPullupToRefresh(false);  

            } else {  
                if (that.firstLoadData) {  
                    // 第一次加载数据，显示空界面  
                    _showNull(container, that.options.nullTemplateId);  
                } else{  
                    that.firstLoadData = false;  
                    mui.toast("当前已是最新数据");  
                }  
                mui(container).pullRefresh().endPullupToRefresh(true);  
            }  

        }  
    });  

};  

/*  
 * 加载数据  
 */  
var _loadData = function(container) {  

    if (mui.os.plus) {  
        mui.plusReady(function() {  
            mui(container).pullRefresh().pulldownLoading();  
        });  
    } else {  
        mui.ready(function() {  
            mui(container).pullRefresh().pulldownLoading();  
        });  
    }  
};  

// 记录列表的类  
var appDataListClass = araleClass.create({  

    /**  
     * 构造方法  
     * @param {Object} options 参数对象  
     * @param {Object} muiInit  
     */  
    initialize : function(options, muiInit){  

        var that = this;  

        // 参数  
        that.options = mui.extend(true, {}, DEFAULT_OPTIONS, options);  

        // 下拉的Page对象  
        that.downParams = _getDownParams(that.options.size, that.options.data);  

        // 上拉的Page对象  
        that.upParams = _getUpParams(that.options.size, that.options.data);  

        // 是否是第一次加载数据，用来判断如果是第一次加载数据并且数据为空，则显示空界面  
        that.firstLoadData = true;  
        that.options.container = "#" + options.listId;  

        // mui初始化  
        var initParam = mui.extend({}, {  
            // 刷新参数  
            pullRefresh: {  
                container: that.options.container, //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等  
                down: {  
                    contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容  
                    contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容  
                    contentrefresh: "正在刷新...1", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容  
                    callback: function() {  
                        _downFunc(that);  
                    } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；  
                },  
                up: {  
                    contentrefresh: "正在加载...1", //可选，正在加载状态时，上拉加载控件上显示的标题内容  
                    contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；  
                    callback: function() {  
                        _upFunc(that);  
                    } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；  
                }  
            }  
        }, muiInit);  
        mui.init(initParam);  
        _loadData(that.options.container);  
    },  

    /**  
     * 数据过滤  
     *   
     * @param {Object} data  
     */  
    filterData : function(data) {  

        var that = this;  

        // 下拉的Page对象  
        that.downParams = _getDownParams(that.options.size, data);  

        // 上拉的Page对象  
        that.upParams = _getUpParams(that.options.size, data);  

        // 清空列表   
        var container = that.options.container;  

        // 清空列表数据  
        var table = document.body.querySelector(container + ' .mui-table-view');  
        table.innerHTML = '';  

        // 重新加载数据  
        _loadData(container);  
    }  
});  

module.exports = appDataListClass;

});

2016-03-01 11:24 2 条评论负责人:无分享