this.$nextTick 测试机上的bug

316 阅读1分钟

需求:

支持轮播,同时首次进入时根据登陆者级别跳转到相应的级别的轮播

使用技术点

Vue, Mand-mobile(其中的swiper组件)

技术实现步骤

  1. 请求后台轮播数据,列表数据赋值
  2. 调用dom节点组件的方法跳转

测试bug:

大部分手机如下代码即可实现

    this.$nextTick(()=>{
        this.$refs.bottomSwiper.goto(Number(memberLevel))
    })

在某部测试机上(安卓),发现没有跳转, 必须如下写才能生效

    <!--如下 代码片段1:-->
    this.$nextTick(()=>{
        setTime(()=>{
            this.$refs.bottomSwiper.goto(Number(memberLevel))    
        },0)
    })
    <!--或者如下 代码片段2:-->
    this.$nextTick().then(()=>{
        this.$refs.bottomSwiper.goto(Number(memberLevel))
    })

推断是机型系统导致的浏览器解析机制特殊导致

这里发生了什么?

  1. 代码片段1中在任务队列中插入了一个宏任务,等当前宏任务队列以及相应的微任务队列执行完后就会执行
  2. 代码片段2中在任务队列中插入了一个微任务,等当前宏任务队列执行完后执行后开始执行微任务队列时候执行这个微任务。
  3. TIPS: 微任务,宏任务请参考 微任务,宏任务