微信公众号DOM的一个坑

　　最近不知道写什么，node的源码有点不知道怎么入手，还在努力学习C++中……

　　在写微信公众号的时候遇到了一个小bug，有一个tab栏，在开发者工具、IOS手机上都OK，但是一到我的小米note上就GG了，怎么切换都无法触发对应的请求，核心代码如下：

// 点击切换
this.pageIndex = 1;
this.$el.scrollTo(0, 0);
this.$router.replace({ query: { days: key } });
const data = await this.loadingData();
this.list = data.items;

　　点击切换后，会重置分页的index参数，然后将滚轮弄到顶，请求数据然后赋值给list。

　　看起来很简单， 但是在我的安卓机上就是没反应，后来用了chrome://inspect/#devices发现报了这样的错：

　　这可难倒我胖虎了……简单在MDN一查，发现第一个弹出来的竟然是Window.scrollTo，这才恍然大悟，这个方法理论上是BOM上的。那么问题来了，为什么我在浏览器跟IOS可以执行那段代码呢？

　　一开始我想的是在chrome里，window被处理成DOM对象的原型，调用scrollTo时通过原型链查找实际上调用的是window.scrollTo。

　　然而并不是这样：

　　但是这样又是正确的：

　　这TM就很尴尬了，哪里飞来的方法？只能一个一个原型的翻了，于是我在某个对象上发现了这个：

　　这个方法确实在原型上啊！难道是微信的DOM比较特殊，自己在chrome外面包了层皮，把scrollTo搞丢了？

　　回到了devtool中一层一层的翻，直到我看到了：

　　还真没有，这个微信浏览器，搞毛线。

　　结论大概是微信的皮包浏览器内核比较旧，某个新版的chrome将scrollTo加到了DOM的原型方法上，至于哪个版本加上的，由于这个东西没那么重要，所以在wiki的chrome history也找不到记录，大概只有在V8的commit里面寻找线索了。

　　我可没那么闲，反正问题解决了，用的scrollTop，免得又遇到奇怪的bug。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有