vue實現列表上下循環滾動

PHPz

發布： 2023-05-25 11:24:07

原創

2539 人瀏覽過

身為前端開發者，我們往往需要實作清單的上下捲動，但如果使用原生的捲軸，使用者體驗常常很不理想。因此，本文將介紹如何透過 Vue.js 實現清單的上下循環滾動效果，以提升使用者體驗。

實現想法

實現上下循環滾動的核心思路是在列表的首尾之間添加一定量的重複數據，這樣當用戶滾動到列表的頂部或底部時，我們將會讓滾動實際上是從另一端的重複資料開始的。這樣就能夠達到上下循環滾動的效果。

但是，如果直接將重複資料直接加入原本的資料來源中，會導致無法正常地顯示原始資料。因此，我們需要藉助計算屬性來實現這一目標，以保持原始資料的完整性。

實作過程

在Vue.js中實作上下循環滾動的過程可以分為以下步驟：

為清單新增一個外部容器

為了實現捲動效果，我們首先需要新增一個容器元素，並將清單放置在其中。同時，我們還需要設定容器的高度和 overflow 屬性，以便使用者可以捲動清單。

<div class="list-container"
     style="height: 400px;
            overflow: auto;">
  <ul class="list">
    <li v-for="(item, index) in displayList"
        :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</div>

登入後複製

定義資料來源和計算屬性

接下來，我們需要定義資料來源和計算屬性，這裡我們以一個陣列list 為資料來源，以displayList 為計算屬性。在計算屬性中，我們會透過 cloneList 方法將資料來源複製一份，並將複製的資料來源首尾相接，並新增重複資料。

data() {
  return {
    list: [
      { id: 1, text: 'item 1' },
      { id: 2, text: 'item 2' },
      ...
      { id: 20, text: 'item 20' }
    ]
  }
},
computed: {
  displayList() {
    const cloneList = [...this.list, ...this.list, ...this.list];
    const top = this.scrollTop % this.itemHeight;
    const startIndex = Math.floor(this.scrollTop / this.itemHeight) % this.list.length;
    const endIndex = startIndex + Math.ceil(this.listHeight / this.itemHeight);

    return cloneList.slice(startIndex, endIndex + 1);
  }
},

登入後複製

綁定捲動事件

為了根據使用者的捲動動作來更新清單的顯示內容，我們需要監聽清單容器的scroll 事件，透過計算被滾動的距離，更新displayList 的計算屬性。

mounted() {
  const listContainer = document.querySelector('.list-container');
  listContainer.addEventListener('scroll', this.handleScroll);
},
methods: {
  handleScroll() {
    const listContainer = document.querySelector('.list-container');
    this.scrollTop = listContainer.scrollTop;
  }
},

登入後複製

計算滾動相關的屬性

在計算屬性中，我們需要計算滾動條的位置和列表項目的高度等屬性，並在displayList 的更新時重新計算。在本例中，我們透過this.scrollTop 來保存容器目前被滾動的距離，透過this.itemHeight 來保存每一個清單項目的高度，透過this. listHeight 來保存整個清單的高度。

data() {
  return {
    ...
    scrollTop: 0,
    itemHeight: 30,
    listHeight: this.list.length * this.itemHeight
  }
},
computed: {
  ...
  displayList() {
    ...
    this.listHeight = this.list.length * this.itemHeight;
    return cloneList.slice(startIndex, endIndex + 1);
  }
},

登入後複製