vux scroller在iOS13上，一停止滑动就跳到顶部

今天客户反馈的问题，说在最新版的iOS上（iOS13），滑动列表，滑完就会跳到顶部，然后去查了下vux的文档，没有解决办法，百度了一大堆，也没有相关问题，只能看下源码到底是哪除了问题。

bug出现的原因：

经过一层层的查找，终于发现是ios13上面获取transform的结果跟老版本的结果不一样

// 老版本：
'matrix(1, -2.4492935982947064, 2.4492935982947064, 1, 0, 19.48200035095215)'

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

在 \node_modules\[email protected]@vux-xscroll\build\cmd\simulate-scroll.js下的getScrollTop方法如下
这里路径可能不完全一样，反正就是源码库里的vux-xscroll里的simulate-scroll.js文件

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\[email protected]@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;
  },

如果有什么更好的解决方法，可以告诉博主哦。

 

 

重新npm install就没用了的解决方法:

首先在项目中新建scroller-edit.vue文件:
把node_modules\[email protected]@vux\src\components\scroller\index.vue文件重新拷贝一份出来放在项目文件里面命名scroller-edit.vue(可以自定义命名)

然后重写getScrollTop方法:

在mounted()方法里的this._xscroll = new XScroll({...})后面 加如下代码

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

这时候会提示transform not defined报错,因为当前文件没有这个transform 所以要把下面这段放在export default {}上面

var vendor = (function vendor() {
  var el = document.createElement('div').style;
  var vendors = ['t', 'webkitT', 'MozT', 'msT', 'OT'],
    transform,
    i = 0,
    l = vendors.length;
  for (; i < l; i++) {
    transform = vendors[i] + 'ransform';
    if (transform in el) return vendors[i].substr(0, vendors[i].length - 1);
  }
  return false;
})()
function prefixStyle(attrName) {
  if (vendor === false) return false;
  if (vendor === '') return attrName;
  return vendor + attrName.charAt(0).toUpperCase() + attrName.substr(1);
}
var transform = prefixStyle("transform");

/*
这段代码中vendor和prefixStyle都是从下面这个目录文件里面抠出来的方法
\node_modules\[email protected]@vux-xscroll\build\cmd\util.js,仅供参考!
*/

最后将项目中所有的替换成我们自己的,其余所有的用法跟原先一摸一样，就改了标签名称而已

然后再次运行项目,就可以啦!大功告成!