zoukankan      html  css  js  c++  java
  • 微信公众号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。

  • 相关阅读:
    BlockingQueue(阻塞队列)详解
    支付宝系统架构(内部架构图)
    微博的消息队列
    JVM源码分析之堆外内存完全解读
    滑动冲突的补充——Event的流程走向
    BaseFragment的定义—所有Fragment的父类
    BaseActivity的定义——作为所有Activity类的父类
    BGARefreshLayout-Android-master的简单使用
    分析BGARefreshLayout-master
    简便数据库——ORMLite框架
  • 原文地址:https://www.cnblogs.com/QH-Jimmy/p/9036109.html
Copyright © 2011-2022 走看看