欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue列表如何自動(dòng)滾動(dòng)到制定位置

 更新時(shí)間：2023年10月09日 08:58:30   作者：王博wangbo  
這篇文章主要介紹了vue列表如何自動(dòng)滾動(dòng)到制定位置問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

背景

業(yè)務(wù)開(kāi)發(fā)中遇到一個(gè)需求，是要求跳轉(zhuǎn)到新頁(yè)面，并默認(rèn)選中內(nèi)容，如果內(nèi)容在列表的位置靠后，就需要滾動(dòng)到可見(jiàn)范圍內(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)文章

最新評(píng)論