uniapp、vue,关于scroll-view中scroll-into-view的坑

因为项目需要一个聊天室的功能,每次收到消息都要滑动到最底部来确保每次新消息都能显示出来。于是打算用scroll-into-view来实现这个功能。
html:
uniapp、vue,关于scroll-view中scroll-into-view的坑_第1张图片
js:
uniapp、vue,关于scroll-view中scroll-into-view的坑_第2张图片

思路没毛病,就是每次监听到有新消息时,自动滑动到这条新消息的位置!
但是写出来后发现,特喵的不跳转!我就感觉是不是我哪里犯了低级错误,于是一遍又一遍检查,但检查不出来哪里有错,要跳转的view的id也没写错,F12检查dom元素也有最新的id,思路没毛病啊。于是就思考是不是最后一个view有问题?于是我就试着去跳转倒数第二个view。
uniapp、vue,关于scroll-view中scroll-into-view的坑_第3张图片
好嘛,这一下试出来了,滑动到倒数第二个view是正常滑动的!那也就是说最后一个view有问题!
后来经过反复试验,最终确定原因,是因为vue的虚拟dom导致的,每次有新的消息时,我不能立即拿到
dom元素,但是页面上有这条消息。所以,解决方法很简单:setTimeout一下,变成异步的就解决了,让其先渲染再滑动就ok了!

uniapp结合vue scroll-view中scroll-into-view的坑

你可能感兴趣的:(uniapp)