static

wm-refresh.js 3.8KB

    define(["iScroll"], function(iScroll){ function WmRefresh(id){ this.id = id; this.pullDownAction = null; this.pullUpAction = null; this.init(); } /** * 下拉刷新 (自定义实现此方法) * myScroll.refresh(); // 数据加载完成后,调用界面更新方法 */ WmRefresh.prototype.setPullDownAction = function(action){ if(typeof(action) == "function") { this.pullDownAction = action; } } /** * 滚动翻页 (自定义实现此方法) * myScroll.refresh(); // 数据加载完成后,调用界面更新方法 */ WmRefresh.prototype.setPullUpAction = function(action){ if(typeof(action) == "function") { this.pullUpAction = action; } } /** * 初始化iScroll控件 */ WmRefresh.prototype.init = function() { var pullDownEl, pullDownOffset, pullUpEl, pullUpOffset; var that = this; var maxHeight = document.getElementById(that.id).offsetHeight + "px"; document.getElementById("c-refresh-wrapper").style.height = maxHeight; pullDownEl = document.getElementById('pullDown'); pullDownOffset = pullDownEl.offsetHeight; pullUpEl = document.getElementById('pullUp'); pullUpOffset = pullUpEl.offsetHeight; var myScroll = new iScroll('c-refresh-wrapper', { // scrollbarClass: 'myScrollbar', /* 重要样式 */ useTransition: true, /* 此属性不知用意,本人从true改为false */ topOffset: pullDownOffset, onRefresh: function () { console.log(this.maxScrollY); if (pullDownEl.className.match('loading')) { pullDownEl.className = ''; pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...'; } else if (pullUpEl.className.match('loading')) { pullUpEl.className = ''; pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...'; } }, onScrollMove: function () { if (this.y > 5 && !pullDownEl.className.match('flip')) { pullDownEl.className = 'flip'; pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...'; this.minScrollY = 0; } else if (this.y < 5 && pullDownEl.className.match('flip')) { pullDownEl.className = ''; pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...'; this.minScrollY = -pullDownOffset; } else{ var c_height = document.getElementById("c-refresh-wrapper").offsetHeight; var s_height = document.getElementById("c-refresh-scroller").offsetHeight; var distance; if (c_height > s_height) { distance = - (1.5 * pullUpOffset); }else{ distance = this.maxScrollY - pullUpOffset; } if (this.y < distance && !pullUpEl.className.match('flip')) { pullUpEl.className = 'flip'; pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...'; this.maxScrollY = this.maxScrollY; } else if (this.y > distance && pullUpEl.className.match('flip')) { pullUpEl.className = ''; pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...'; // this.maxScrollY = pullUpOffset; } } }, onScrollEnd: function () { if (pullDownEl.className.match('flip')) { pullDownEl.className = 'loading'; pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...'; if(that.pullDownAction){ that.pullDownAction(myScroll); }else{ console.log("未定义下拉刷新方法"); myScroll.refresh(); } } else if (pullUpEl.className.match('flip')) { pullUpEl.className = 'loading'; pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...'; if(that.pullUpAction){ that.pullUpAction(myScroll); }else{ console.log("未定义上拉加载更多"); myScroll.refresh(); } } } }); } return WmRefresh; })