Vue 实现上下不间断滚动列表：构建令人惊叹的用户交互

2023-11-05 09:05:58

利用 Vue 的响应式特性构建滚动列表

Vue 的响应式特性可以轻松创建动态和交互式的滚动列表。首先，我们需要创建一个包含列表项的 Vue 组件。每个列表项可以是一个简单的 <li> 元素，也可以是更复杂的组件。

<template>
  <div id="scroll-container">
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        // ...
      ]
    };
  }
};
</script>

接下来，我们需要在 Vue 组件中添加滚动侦听器。滚动侦听器可以检测到滚动事件，并根据滚动位置更新列表项的位置。

export default {
  // ...

  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },

  methods: {
    handleScroll() {
      // 计算滚动位置
      const scrollTop = window.pageYOffset;

      // 获取列表容器的高度
      const containerHeight = document.getElementById('scroll-container').clientHeight;

      // 获取列表项的高度
      const itemHeight = document.querySelector('li').clientHeight;

      // 计算当前显示的列表项的数量
      const visibleItems = Math.floor(containerHeight / itemHeight);

      // 如果滚动位置接近列表底部，则加载更多列表项
      if (scrollTop + containerHeight >= document.body.scrollHeight - 100) {
        this.loadMoreItems();
      }
    },

    loadMoreItems() {
      // 从服务器加载更多列表项
      // ...

      // 更新列表项的数据
      this.items = this.items.concat(newItems);
    }
  }
};

最后，我们需要在 Vue 组件中添加 CSS 样式来控制列表的外观和滚动行为。

#scroll-container {
  height: 500px;
  overflow-y: auto;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

使用 CSS 动画和过渡效果增强用户体验

为了进一步增强用户体验，我们可以使用 CSS 动画和过渡效果来实现平滑的滚动和加载动画。

/* 列表项的进入动画 */
.item-enter {
  opacity: 0;
  transform: translateX(-100px);
}

.item-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: all 300ms ease-in-out;
}

/* 列表项的离开动画 */
.item-leave {
  opacity: 1;
  transform: translateX(0);
}

.item-leave-active {
  opacity: 0;
  transform: translateX(100px);
  transition: all 300ms ease-in-out;
}