vux中Scroller ios13上,滑动的时候总是会莫名其妙的弹回顶部

224 阅读2分钟

问题描述

因为是维护之前的项目,这个项目之前也不是我负责的,也不清楚当时那位老哥是为何非要使用已经停止维护的 vuxScroller

刚开始面对这个问题我也是很茫然,因为在开发的时候用浏览器测试时是完全没有这个问题,加上我手机之前也没有升级到 ios 13,所以也是没有发现到这个问题。发现了以后,我去排查代码,感觉也没什么问题呀。好像也没有类似让他滚回顶部的逻辑代码呀。于是我就网上找了一些资料,看了一些文章和评论,好像这个 vux 坑还蛮多的。幸运的是我终于找到了遇到跟我一样的孩纸。

出现原因

大概就是因为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\vux-xscroll\build\cmd\simulate-scroll.js下的getScrollTop方法里面的正则表达式替换成下面(/[-\d.\de-\d]+/g )的就可以了。 这里路径可能不完全一样,反正就是源码库里的 vux-xscroll 里的 simulate-scroll.js 这个文件

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;
  }

其实这个里面的更深层的意思是什么我也不懂,就是想记录一下自己的经历,然后也希望以后要是还有小朋友遇到这个问题,可以更快的解决这个问题