フロントエンド開発者として、リストを上下にスクロールする必要があることがよくありますが、ネイティブ スクロール バーを使用すると、ユーザー エクスペリエンスが理想的でないことがよくあります。したがって、この記事では、Vue.js を使用してリストの上下スクロール効果を実現し、ユーザー エクスペリエンスを向上させる方法を紹介します。

実装アイデア

上下の循環スクロールを実装するための中心的なアイデアは、リストの先頭と末尾の間に一定量の繰り返しデータを追加することです。これにより、ユーザーがリストにスクロールしたときに、リストの一番上または一番下で、実際に反対側の重複データからスクロールを開始させます。このようにして、上下の円形スクロールの効果を実現できます。

ただし、元のデータソースに直接重複データを追加すると、元のデータが正常に表示されません。したがって、元のデータの整合性を維持するために、計算されたプロパティを利用してこれを実現する必要があります。

実装プロセス

Vue.js で上下の循環スクロールを実装するプロセスは、次のステップに分けることができます。

1. 外部コンテナをlist

スクロール効果を実現するには、まずコンテナ要素を追加し、その中にリストを配置する必要があります。同時に、ユーザーがリストをスクロールできるように、コンテナーの高さとオーバーフローのプロパティを設定する必要もあります。

<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>

2. データ ソースと計算されたプロパティを定義します

次に、データ ソースと計算されたプロパティを定義する必要があります。ここでは配列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 の計算されたプロパティを更新します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'>mounted() { const listContainer = document.querySelector('.list-container'); listContainer.addEventListener('scroll', this.handleScroll); }, methods: { handleScroll() { const listContainer = document.querySelector('.list-container'); this.scrollTop = listContainer.scrollTop; } },</pre><div class="contentsignin">ログイン後にコピー</div></div>

計算されたプロパティでは、スクロール バーの位置、リスト項目の高さ、およびその他のプロパティを計算する必要があります。

は更新時に再計算されます。この例では、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);
  }
},