ios系统webview环境bug

achuan9 commented 7 years ago

首先要表示很喜欢此作品，在众多插件中选择了这个。但实际应用中在ios系统webview环境下遇到了一个棘手的bug。先上拉接着下拉刷新（不要放手），底层会出现重复页面。也请ios开发的同学协助解决，最终还是没能找出一个合理的解决办法

achuan9 commented 7 years ago

以下暂时通过阻止先上拉再下拉刷新解决了问题，但不是最好的办法。希望作者能找出合理的解决方案。支持！
var pullload = function(opts){ this.config = {}; this.container = null; //具有scroll的容器 this.wrapper = null; //结构外包围元素 this.loaderBody = null; //DOM 对象 this.loaderSymbol = null; //DOM 对象 this.loaderBtn = null; //DOM 对象 this.loaderState = STATS.init; this.hasMore = true; //是否有加载更多 this.startX = 0; //用于保存touchstart时初始位置 this.startY = 0;//用于保存touchstart时初始位置

this.bugFlag = false; //ioswebView先上拉再下拉出现两层文档

this.init(opts);

} onTouchStart: function(event){ var targetEvent = event.changedTouches[0]; var scrollTop = this.container.scrollTop; this.startX = targetEvent.clientX; this.startY = targetEvent.clientY;

if (scrollTop < 1 && this.bugFlag) this.bugFlag = false;

},
onTouchMove: function(event){
  var targetEvent = event.changedTouches[0],
    x = targetEvent.clientX,
    y = targetEvent.clientY,
    scrollTop = this.container.scrollTop,
    scrollH = this.container.scrollHeight,
    conH = this.container === document.body ? document.documentElement.clientHeight : this.container.offsetHeight;
    diffX = x - this.startX,
    diffY = y - this.startY;

if (diffY < 0) this.bugFlag = true; //diffy为负数是下拉

  //判断垂直移动距离是否大于5 && 横向移动距离小于纵向移动距离
  if(Math.abs(diffY) > 5 && Math.abs(diffY) > Math.abs(diffX)){
    //滚动距离小于设定值 &&回调onPullDownMove 函数，并且回传位置值
    if(diffY > 5 && scrollTop < this.config.offsetScrollTop ){
      // //阻止执行浏览器默认动作

if (this.bugFlag) return

      event.preventDefault();
      this.onPullDownMove(this.startY, y);
    } //滚动距离距离底部小于设定值
    else if(diffY < 0 && (scrollH - scrollTop - conH) < this.config.distanceBottom ){
      //阻止执行浏览器默认动作
      event.preventDefault();
      this.onPullUpMove(this.startY, y);
    }
  }
},
onTouchEnd: function(event){

  var targetEvent = event.changedTouches[0],
    x = targetEvent.clientX,
    y = targetEvent.clientY,
    scrollTop = this.container.scrollTop,
    scrollH = this.container.scrollHeight,
    conH = this.container === document.body ? document.documentElement.clientHeight : this.container.offsetHeight;
    diffX = x - this.startX,
    diffY = y - this.startY;
  //判断垂直移动距离是否大于5 && 横向移动距离小于纵向移动距离
  if(Math.abs(diffY) > 5 && Math.abs(diffY) > Math.abs(diffX)){
    if(diffY > 5 && scrollTop < this.config.offsetScrollTop ){
      //回调onPullDownRefresh 函数，即满足刷新条件

if (this.bugFlag) return

      this.onPullDownRefresh();
    }
  }
},

lidianhao123 commented 7 years ago

首先感谢您对此组件的肯定。正在回复您，感谢给出的解决方案。不过 markdown 格式有点混乱，欢迎 fork 后 pull request。我会跟进这个问题。

@Seanest 另外能否提供更多关于您使用的 webview 的信息，例如：使用的是 WKWebview 还是 UIWebview？

lidianhao123 / pullLoad

ios系统webview环境bug #4