详细问题描述
[内容]
发现多tab页面中的下拉刷新是mui单独另外写的脚本,有以下疑问,求赐教:
HelloMui工程中给出的示例pullrefresh_width_tab.html示例为:tab选项卡模式中的下拉加载示例有个问题,在往上拉动去加载数据时,手不要放开持续往上拉动,此时如果触发的上拉事件响应较快时,会造成上拉事件被多次调用。HelloMui中的这个示例中在up(或down)的callback函数中给出的示例代码是有个setTimeout(1000)毫秒延迟,该延迟后触发self.endPullDownToRefresh();结束上拉效果,恰巧避免了这种问题,因为1秒钟的时间足够callback中创建一组dom元素再追加到数据列表了。
不太好描述,不知道说清楚了没有。正常情况一般不会重复被调用,关键就是拖动后事件已触发并且手继续不停的拖动,就导致实际上已调用了endPullUpToRefresh方法了,而由于手还没有松开导致的事件持续调用触发。
setTimeout(1000)其实还是会多次触发请求,为了容易复现可将其去掉,代码如下:
$(pullRefreshEl).pullToRefresh({
down: {
callback: function() {
var self = this;
console.log("ddddddddddddddddd");
var ul = self.element.querySelector('.mui-table-view');
ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);
self.endPullDownToRefresh();
}
},
up: {
callback: function() {
var self = this;
console.log("uuuuuuuuuuuuuuu");
var ul = self.element.querySelector('.mui-table-view');
ul.appendChild(createFragment(ul, index, 5));
self.endPullUpToRefresh();
}
}
});
重现步骤
[步骤]
[结果]
[期望]
运行环境
[系统版本]
[浏览器版本]
[IDE版本]
[mui版本]
附件
[代码片段]
[安装包]
联系方式
88911006@qq.com
[QQ]
[电话]
1 个回复
8***@qq.com (作者)
试了下将代码中的实际的回调函数处加上了1000毫秒的setTimeout效果凑合,另外给回调处加上了函数调用间隔时间的判断,如:当函数调用与上次调用之间超过3秒(或5秒)以上才为真正的用户有效请求。同时在不满足情况时的pull的状态设置为结束。