vux中的 scroller 组件,在iOS13上,一停止滑动就跳到顶部问题

时间:2021-04-08 13:53:58   收藏:0   阅读:0

bug出现的原因

1、发现是ios13上面获取transform的结果跟老版本的结果不一样:

// 老版本:
‘matrix(1, -2.4492935982947064, 2.4492935982947064, 1, 0, 19.48200035095215)‘

//新版本
‘matrix(1, -2.4492935982947064e-16, 2.4492935982947064e-16, 1, 0, 19.48200035095215)‘

2、在node_modules -> vux-xscroll -> build -> cmd -> simulate-scroll.js下的getScrollTop方法如下:

getScrollTop: function() {
  var transY = window.getComputedStyle(this.container)[transform].match(/[-\d\.*\d*]+/g);
  return transY ? Math.round(transY[5]) === 0 ? 0 : -Math.round(transY[5]) : 0;
}

该方法校验transform的正则( /[-\d\.*\d*]+/g  )不能满足新版本,所以匹配最新版本的ios会出现得到 

transY  = ["1", "-2.4492935982947064", "-16", "2.4492935982947064", "-16", "1", "0", "19.48200035095215"]的结果。
getScrollTop得到的返回值为-Math.round(transY[5]) 的时候永远为-1,这也就是为什么获取到的scrollTop的值总是会变成-1。

解决办法:

将node_modules -> vux-xscroll -> build -> cmd -> simulate-scroll.js下的getScrollTop方法里面的正则表达式替换成下面(/[-\d\.*\d*e\-\d]+/g )的就可以了。

getScrollTop: function() {
  // var transY = window.getComputedStyle(this.container)[transform].match(/[-\d\.*\d*]+/g);
  var transY = window.getComputedStyle(this.container)[transform].match(/[-\d\.*\d*e\-\d]+/g);
  return transY ? Math.round(transY[5]) === 0 ? 0 : -Math.round(transY[5]) : 0;
} 
评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!