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

在很多网站,包括百度,都有一个 "换一换" 的功能,让用户能够随机或顺序查看更多内容。以下是一个使用 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>

解释

  1. 数据和状态 : 我们有一个 allData 数组来存放所有数据,一个 currentPage 来追踪当前是第几页,以及一个 itemsPerPage 来定义每页有多少条数据。

  2. 计算属性 : 我们用 currentPageData 来计算当前应该显示哪些数据,用 totalPages 来计算总共有多少页。

  3. 换一换功能 : 我们的 switchPage 方法简单地将 currentPage 加1,然后取模 totalPages,这样就能循环显示所有页面。

  4. 样式: 我们用简单的 CSS 来布局,每行显示 4 个内容项。

  5. 初始化 : 在 mounted 生命周期钩子中,我们初始化了模拟数据。在实际应用中,这里通常会是一个 API 调用。

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

相关推荐
fruge36511 小时前
从零到一:我在 Rokid Glasses 上“画”出一个远程协作系统
前端
BumBle11 小时前
高频扫码场景下的去重与接口调用方案
前端·javascript
Mapmost12 小时前
半透明模型渲染全白?Mapmost Studio一招搞定
前端
SpiderPex12 小时前
JavaWeb登录模块完整实现解析:从前端点击到后端验证的全流程
前端
Qhappy12 小时前
某里连线九宫格图片wasm解密&识别
javascript
可乐爱宅着12 小时前
在VSCode的next.js项目中更好的使用eslint/prettier工具
前端·next.js
_大学牲12 小时前
🫡我在掘金写文章:一气之下开源 视频转无水印GIF 插件
前端·javascript
地方地方12 小时前
深入理解 instanceof 操作符:从原理到手动实现
前端·javascript
哀木12 小时前
useRef 为什么不能作为 useEffect 的依赖项
前端
渣哥12 小时前
事务崩了别怪数据库!三大核心要素没掌握才是根本原因
javascript·后端·面试