VUE3+Typescript：为div动态设置ref并实现div滚动效果

1. v-for遍历的多个div，动态设置ref

template

<div  v-for="(element, index) in verifiedClaims" :key="index" :ref="el => setDynamicRef(el, index)">
</div>

script

• setDynamicRef是会被自动调用的，不需要在别的地方再引用
• setDynamicRef中传入index，确保顺序一致
• claimRefs[index]就可以调用对应的ref

let claimRefs = ref([])
const setDynamicRef= (el, index) => {
  if (el) {
    claimRefs.value[index] = el
  }
}

2. div块滚动效果

1. scrollIntoView

-引用时需要加$el： claimRefs.value[index].$el

let index = answerClaims.value.indexOf(element)
//对应的div会滚动到视野中
claimRefs.value[index].$el.scrollIntoView({
    behavior: 'smooth',
    block: 'start',
  })

• mdn文档参数设置
  

2. scrollTop

但我使用这个的时候有时候会不生效！ε=(´ο｀*)))唉

claimRefs.value[index].$el.scrollTop = 0