关于Vue中使用了better-scroll

better-scroll的中文api

https://ustbhuangyi.github.io/better-scroll/doc/zh-hans

这个是api中作者关于vue中使用的文章

https://zhuanlan.zhihu.com/p/27407024

 

 

 

Vue.js 提供了我们一个获取 DOM 对象的接口—— vm.$refs。在这里,我们通过了 this.$refs.wrapper访问到了这个 DOM 对象,并且我们在 mounted 这个钩子函数里,this.$nextTick 的回调函数中初始化 better-scroll 。因为这个时候,wrapper 的 DOM 已经渲染了,我们可以正确计算它以及它内层 content 的高度,以确保滚动正常。

这里的 this.$nextTick 是一个异步函数,为了确保 DOM 已经渲染,感兴趣的同学可以了解一下它的内部实现细节,底层用到了 MutationObserver 或者是 setTimeout(fn, 0)。其实我们在这里把 this.$nextTick 替换成 setTimeout(fn, 20) 也是可以的(20 ms 是一个经验值,每一个 Tick 约为 17 ms),对用户体验而言都是无感知的。

 

 

16:39:36 2020-01-07

posted @ 2020-01-07 16:40  苏落喜欢小栉心  阅读(128)  评论(0)    收藏  举报