首先在项目中新建scroller-edit.vue文件:把node_modules\_vux@2.9.4@vux\src\components\scroller\index.vue文件重新复制一份出来放在项目文件里面命名scrollerEdit.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> import scrollerEdit from './../components/scrollerEdit' export default { components: { scrollerEdit },
修改截图如下: