效果展示:
解决方案:
关键:ref="setItemRef"和循环内容
html页面:
<div v-for="(item,index) in tableData" :key="index" class="margin-t-20" :ref="setItemRef(index)">
<div class="font-14">
<div v-html="`${item.answer_explain}`.replace(/\n/g,'<br/>')"></div>
<div v-html="`${item.answer}`.replace(/\n/g,'<br/>')"></div>
</div>
</div>
script部分:
const itemRefs = ref([]); // 用来存储每个对话项的 ref
// 动态设置 ref
const setItemRef = (index) => (el) => {
itemRefs.value[index] = el;
scrollToItem(AIindex.value)
};
// 滚动到指定项
const scrollToItem = (index) => {
const targetElement = itemRefs.value[index];
if (targetElement) {
targetElement.scrollIntoView({ behavior: "auto", block: "start" });
}
};
总结:重点就是scrollIntoView方法