vue はリストの上下スクロールを実装します

PHPz

リリース： 2023-05-25 11:24:07

オリジナル

2531 人が閲覧しました

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

実装アイデア

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

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

実装プロセス

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

外部コンテナを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>

ログイン後にコピー

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

次に、データソースと計算されたプロパティを定義する必要があります。ここでは配列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>

スクロール関連のプロパティを計算する

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);
  }
},

ログイン後にコピー

概要上記の手順により、Vue.js に基づいてリストの上下スクロールを実現できます。ユーザーがリストの一番上または一番下にスクロールすると、実際にはもう一方の端で繰り返されるデータからスクロールが開始されるため、上下にスクロールする効果が得られます。さらに、計算されたプロパティを使用して元のデータの整合性を維持し、スクロール イベントをバインドしてスクロール関連のプロパティを計算することで、自然でスムーズなスクロール効果を実現しました。 
以上がvue はリストの上下スクロールを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。