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\_vux-xscroll@3.1.12@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\_vux-xscroll@3.1.12@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\_vux@2.9.4@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\_vux-xscroll@3.1.12@vux-xscroll\build\cmd\util.js,仅供参考!
*/

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

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

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

vux scroller在iOS上，一停止滑动就跳到顶部
vux scroller在iOS上滑动列表,滑完就会跳到顶部,然后去查了下vux的文档,没有解决办法,百度了一大堆,也没有相关问题,只能看下源码到底是哪除了问题. 经过一层层的查找,终于发现是ios1 ...
Android从上往下滑动或从下往上滑动结束Activity
之前有看过xiaanming写的侧滑返回,于是仿照他的Demo,写了这个从上往下滑动或者从下往上滑动结束Activity 先附图一张,由于这台电脑分辨率有问题以及模拟器的缘故,先凑活看吧先贴代码: ...
如何在Android设备上关闭/停止正在运行的应用程序
Android apps don't actually stop running when you return to the Home screen or switch to another app ...
Ionic4 Camera插件在iOS13上选取视频失败上传时候提示权限不足
Ionic4 Camera插件在iOS13上选取视频失败上传时候提示权限不足问题 iOS13获取本地视频的路径: file:///private/var/mobile/Containers/Dat ...
微信小程序iOS系统上echarts不能滑动的问题
在微信小程序中使用echarts插件的时候,遇到了一个问题:当系统是iOS时,如果手指先是长按图表,然后页面会无法滑动,其中南丁格尔玫瑰图尤其明显.作为一个微信小程序的新手开发,这个问题属实难倒我了. ...
2022-02-16 工作记录--Swiper-实现跑马灯效果：鼠标经过时停止滑动，鼠标离开后继续滑动
Swiper-实现跑马灯效果:鼠标经过时停止滑动,鼠标离开后继续滑动一.效果图二.对应代码 [swiper详情可见swiper官网,下面给出实现跑马灯效果的代码] [注意] 下面CSS和JS代码里 ...
iOS开发68-iOS 如何让UIScrollView在手指离开后立即停止滑动
iOS开发68-iOS 如何让UIScrollView在手指离开后立即停止滑动在Delegate里面 -(void)scrollViewWillBeginDecelerating: (UIScrol ...
iOS13上传相册视频Code=1 Operation not permitted
文章目录 iOS13上传相册视频Code=1 "Operation not permitted" 上传报错分析问题解决问题发现问题解决问题 iOS13上传相册视频Code= ...
滑动到底部或顶部响应的ScrollView实现
转:http://www.trinea.cn/android/滑动到底部或顶部响应的scrollview/ 两种实现方式的主要不同点在于判断滑动位置的地方,第一种方式在onScrollChanged函 ...

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

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

最新文章

热门文章