CSS + JS + Vue 实现仿百度 "换一换" 功能

有问题请咨询gpt2023-10-04 10:03

在很多网站，包括百度，都有一个 "换一换" 的功能，让用户能够随机或顺序查看更多内容。以下是一个使用 Vue.js，CSS 和 JavaScript 实现的简单示例。

Vue 组件

假设我们有一个 Switcher.vue 组件：

vue 复制代码

<template>
  <div>
    <div class="content-container">
      <div v-for="item in currentPageData" :key="item.id" class="content-item">
        {{ item.content }}
      </div>
    </div>
    <button @click="switchPage">换一换</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allData: [], // 存放所有数据
      currentPage: 0, // 当前页数
      itemsPerPage: 8, // 每页显示的条数
    };
  },
  computed: {
    // 计算当前页的数据
    currentPageData() {
      const start = this.currentPage * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.allData.slice(start, end);
    },
    // 计算总页数
    totalPages() {
      return Math.ceil(this.allData.length / this.itemsPerPage);
    },
  },
  methods: {
    // 换页函数
    switchPage() {
      this.currentPage = (this.currentPage + 1) % this.totalPages;
    },
  },
  // 假设我们在这里用一个模拟的 API 来填充 allData
  mounted() {
    this.allData = Array.from({ length: 63 }, (_, i) => ({
      id: i + 1,
      content: `内容${i + 1}`,
    }));
  },
};
</script>

<style scoped>
.content-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.content-item {
  flex-basis: calc(25% - 10px);
  margin: 5px;
  padding: 10px;
  border: 1px solid #ccc;
  text-align: center;
}
</style>

解释

数据和状态 : 我们有一个 allData 数组来存放所有数据，一个 currentPage 来追踪当前是第几页，以及一个 itemsPerPage 来定义每页有多少条数据。
计算属性 : 我们用 currentPageData 来计算当前应该显示哪些数据，用 totalPages 来计算总共有多少页。
换一换功能 : 我们的 switchPage 方法简单地将 currentPage 加1，然后取模 totalPages，这样就能循环显示所有页面。
样式: 我们用简单的 CSS 来布局，每行显示 4 个内容项。
初始化 : 在 mounted 生命周期钩子中，我们初始化了模拟数据。在实际应用中，这里通常会是一个 API 调用。

这个组件现在可以实现基础的 "换一换" 功能。你可以根据实际需要进行进一步的定制和优化。希望这个示例能帮助你！