javascript - 关于Vue2中$refs获取DOM元素以及scrollIntoView相关的问题

查看:301
本文介绍了javascript - 关于Vue2中$refs获取DOM元素以及scrollIntoView相关的问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

1.需求是这样的,页面内部有个ul+li滚动列表,现在希望列表中的某个超出的元素滚动到可以看见的位置,大概画了一下示意图

2.我用的是vue2,本打算用scrollIntoView试试,但在获取dom元素的时候遇到了问题,ref不是响应式的,但我的视频列表是用vue-resource取出来的,所以用ref取不到,并且用document.getElementById等方法也取不到,具体可以看看例子

https://jsfiddle.net/3jjx8b3s/3/

所以我想问的是:
需求有什么实现方法,我能想到的就是改变ul的scrollTop值
Vue2中有什么方法能获取动态的dom元素?我知道Vue的理念是操作数据而不是操作dom,但像我的需求这种问题很难用数据表现出来吧,还请大神指点一二

解决方案

可以用 $nextTick 來確保 Dom 變化後再執行一些事情:

  this.$nextTick( () => {
    this.$refs.li[7].scrollIntoView()
  })

改寫了一些:jsFiddle

这篇关于javascript - 关于Vue2中$refs获取DOM元素以及scrollIntoView相关的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆