vue列表如何自動(dòng)滾動(dòng)到制定位置
背景
業(yè)務(wù)開發(fā)中遇到一個(gè)需求，是要求跳轉(zhuǎn)到新頁(yè)面，并默認(rèn)選中內(nèi)容，如果內(nèi)容在列表的位置靠后，就需要滾動(dòng)到可見范圍內(nèi)。
實(shí)現(xiàn)
1. 循環(huán)實(shí)現(xiàn)列表，為每個(gè)item添加id,**:id="'item' + index"**,方便后續(xù)查找對(duì)應(yīng)項(xiàng)
<div v-for="(item,index) in dataList" :id="'item' + index" :key="index" class="item">
<span>item: {{ item.name }}</span>
</div>2. 待列表加載完后，執(zhí)行滾動(dòng)事件
// count 默認(rèn)選中內(nèi)容的序號(hào)
document.getElementById('item' + count).scrollIntoView()知識(shí)點(diǎn)
1. scrollIntoView：Element.scrollIntoView() 方法讓當(dāng)前的元素滾動(dòng)到瀏覽器窗口的可視區(qū)域內(nèi)。
2. 未避免事件執(zhí)行失敗，一定要在頁(yè)面加載完成才能觸發(fā)事件，
推薦2種方式
- 2.1 在mounted事件中觸發(fā)
- 2.2 在執(zhí)行事件時(shí)，用this.$nextTick保證頁(yè)面加載完成
this.$nextTick(() => {
document.getElementById('item' + count).scrollIntoView()
})代碼
以下是一個(gè)小demo，可直接執(zhí)行
<template>
<div class="white-body-view">
<div class="content-view">
<div v-for="(item,index) in dataList" :id="'item' + index" :key="index" class="item">
<span>item: {{ item.name }}</span>
</div>
</div>
</div>
</template><script>
export default {
data() {
return {
dataList: [
{
name: '1'
},
{
name: '2'
},
{
name: '3'
},
{
name: '4'
},
{
name: '5'
},
{
name: '6'
},
{
name: '7'
},
{
name: '8'
},
{
name: '9'
},
{
name: '10'
},
{
name: '11'
},
{
name: '12'
}
]
}
},
mounted() {
document.getElementById('item5').scrollIntoView()
}
}
</script><style lang="scss">
.content-view {
height: 200px;
width: 200px;
overflow: auto;
}
.item {
line-height: 40px;
}
</style>總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue keep-alive實(shí)踐總結(jié)（推薦）
本篇文章主要介紹了Vue keep-alive實(shí)踐總結(jié)（推薦），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
vue實(shí)現(xiàn)水波漣漪效果的點(diǎn)擊反饋指令
鼠標(biāo)移入時(shí)的小手、鼠標(biāo)點(diǎn)擊時(shí)按鈕下壓彈起的動(dòng)畫、觸屏應(yīng)用點(diǎn)擊時(shí)的屏幕震動(dòng)，這些效果也被統(tǒng)稱為點(diǎn)擊反饋，雖然看似是應(yīng)用中的細(xì)枝末節(jié)，但是只要稍微投入一點(diǎn)點(diǎn)心思，帶來(lái)的用戶體驗(yàn)提升是十分明顯的,這里作者為小伙伴們推薦一種作者最喜歡的點(diǎn)擊反饋效果。2021-05-05
這篇文章主要介紹了vue單頁(yè)緩存方案分析及實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue2實(shí)現(xiàn)Office文檔(docx、xlsx、pdf)在線預(yù)覽功能
在現(xiàn)代的Web應(yīng)用開發(fā)中,實(shí)現(xiàn)Office文檔（如docx、xlsx、pdf）的在線預(yù)覽功能是一個(gè)常見的需求,下面小編就來(lái)和大家詳細(xì)介紹一下如何使用vue2實(shí)現(xiàn)這一功能吧2025-05-05
vue如何通過(guò)button的disabled控制按鈕能否被使用
這篇文章主要介紹了vue如何通過(guò)button的disabled控制按鈕能否被使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue vantUI實(shí)現(xiàn)文件（圖片、文檔、視頻、音頻）上傳（多文件）
這篇文章主要介紹了vue vantUI實(shí)現(xiàn)文件（圖片、文檔、視頻、音頻）上傳（多文件），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Vue3.x項(xiàng)目開發(fā)的一些常用知識(shí)點(diǎn)總結(jié)
目前Vue3.0是會(huì)兼容大部分2.x的語(yǔ)法,下面這篇文章主要給大家介紹了關(guān)于Vue3.x項(xiàng)目開發(fā)的一些常用知識(shí)點(diǎn),文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
element?ui?watch?el-input賦值之后無(wú)法刪除或修改問(wèn)題
這篇文章主要介紹了element?ui?watch?el-input賦值之后無(wú)法刪除或修改問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
vue實(shí)現(xiàn)無(wú)縫輪播效果(跑馬燈)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)無(wú)縫輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要為大家詳細(xì)介紹了Vue生命周期中的組件化，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03