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,僅供參考!
*/

最後將項目中所有的<scroller></scroller>替換成我們自己的<scroller-edit></scroller-edit>,其餘所有的用法跟原先一摸一樣，就改了標籤名稱而已

然後再次運行項目,就可以啦!大功告成!