可以結(jié)合使用Vue的ref和scrollIntoView()方法來實(shí)現(xiàn)文章來源地址http://www.zghlxwxcb.cn/news/detail-675479.html
<template>
<div>
<button @click="addDiv">添加新的<div>標(biāo)簽</button>
<div ref="container" class="container">
<div v-for="（item,index) in divs" :key="index" ref="divElement" class="div-element">
<!-- 此處為動(dòng)態(tài)添加的div內(nèi)容 -->
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
divs: []
};
},
methods: {
addDiv() {
this.divs.push({name:'小明'})
this.$nextTick(() => {
const divElement = this.$refs.divElement[this.$refs.divElement.length - 1];
//this.$refs.divElement.length - 1 取的是該數(shù)組中的最后一個(gè)
if (divElement) {
divElement.scrollIntoView({ behavior: 'smooth', block: 'end' });
}
});
}
}
};
</script>
文章來源：http://www.zghlxwxcb.cn/news/detail-675479.html
到了這里，關(guān)于vue中將新添加的div標(biāo)簽自動(dòng)定位到可視區(qū)域內(nèi)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
