如何使用 Vue 实现仿知乎日报的页面设计？-Vue.js-PHP中文网

Vue.js 是一种基于 MVVM 模式的前端框架，通过数据绑定和组件化的方式将数据和 UI 页面进行了解耦，使 Web 开发更加高效和简单。知乎日报是一种新闻客户端，有着美观的 UI 设计，功能强大的交互性以及内容多样性。在本篇文章中，我们将通过 Vue 技术实现一个仿知乎日报的页面设计。

搭建环境

在开始之前，我们需要先安装 Node.js 和 Vue-cli。安装 Node.js 后，使用命令行工具在终端运行以下命令安装 Vue-cli:

$ npm install -g vue-cli

登录后复制

在安装完毕后，使用 Vue-cli 创建一个基于 webpack 模板的项目：

$ vue init webpack vue-zhihudaily

登录后复制

此时，我们可以看到 create a new project 问你若干问题（项目名称、描述、作者、是否需要 eslint 代码规范等）之后，会在当前目录下创建一个名为 vue-zhihudaily 的文件夹作为项目根目录。

页面布局

在仿知乎日报中，主要分为首页、文章列表页和文章详情页三个页面，在这里我们以首页为例。在 src 文件夹中，创建一个 views 文件夹存放界面文件。创建 Home.vue 文件，代码如下：

<template>
  <div class="home">
    <div class="banner"></div>
    <div class="daily-list"></div>
  </div>
</template>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.banner {
  width: 100%;
  height: 200px;
  background: linear-gradient(to bottom, #ffffff, #f5f5f5);
}
.daily-list {
  width: 100%;
  height: 100%;
}
</style>

登录后复制

在这里，我们使用 flex 布局将页面垂直居中。其中，banner 用于展示轮播图，daily-list 用于显示文章列表。

使用组件

为了方便复用和维护，我们使用 Vue 组件化来构建界面。在 src 文件夹中，创建一个 components 文件夹存放组件文件。在其中，创建一个名为 DailyItem.vue 的文件：

<template>
  <div class="daily-item">
    <div class="thumbnail">
      <img :src="item.images[0]" alt="">
    </div>
    <div class="info">
      <div class="title">{{item.title}}</div>
      <div class="date">{{item.date}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['item']
}
</script>

<style scoped>
.daily-item {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  padding: 0 10px;
  box-sizing: border-box;
  background: #ffffff;
}
.daily-item:hover {
  cursor: pointer;
}
.thumbnail {
  width: 80px;
  height: 60px;
  margin-right: 10px;
  overflow: hidden;
}
.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.title {
  font-size: 16px;
  color: #444444;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.date {
  font-size: 12px;
  color: #999999;
}
</style>

登录后复制

DailyItem.vue 用于显示文章列表中的信息，其中包括文章缩略图、标题和日期。在这里，我们使用 props 属性将文章信息传入组件。在 Home.vue 中使用 DailyItem.vue 组件，将 daily-list 替换成：

<div class="daily-list">
  <daily-item v-for="(item, index) in dailyList" :key="index" :item="item"></daily-item>
</div>

登录后复制

当有多篇日报时，该组件会自动地为每一篇日报渲染一个 DailyItem.vue。在父级组件 home 通过 props 将 dailyList 传入子组件 DailyItem.vue。

轮播图实现

仿知乎日报的轮播图是该页面的重要组成部分。在 src 文件夹中，创建一个名为 Banner.vue 的组件：

<template>
  <div class="banner">
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(item, index) in bannerList" :key="index">
        <img :src="item.image" alt="">
        <div class="text">{{item.title}}</div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, Pagination } from 'swiper/dist/js/swiper.esm.js'
import 'swiper/dist/css/swiper.css'

export default {
  data () {
    return {
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true,
        autoplay: {
          delay: 3000
        }
      }
    }
  },
  props: ['bannerList'],
  mounted () {
    Swiper.use([Pagination])
    this.$refs.mySwiper.swiper.slideTo(0)
  },
  components: {
    Swiper,
    SwiperSlide,
    Pagination
  }
}
</script>

<style scoped>
.banner {
  width: 100%;
  height: 200px;
  background: linear-gradient(to bottom, #ffffff, #f5f5f5);
}
.swiper-pagination-bullet-active {
  background-color: #ffffff;
}
.text {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 16px;
  color: #ffffff;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

登录后复制

在 Banner.vue 中，我们使用了 Swiper 第三方库来构建轮播图。在 mounted 钩子函数中调用 swiper.slideTo(0) 来实现初始页面为第一张轮播图。

在 Home.vue 中使用 Banner.vue 组件：

<div class="banner">
  <banner :bannerList="bannerList"></banner>
</div>

登录后复制

此处使用 props 将 bannerList 传入 Banner.vue 组件中。

数据获取

在仿知乎日报中，首页需要展示文章列表和轮播图。我们使用 axios 库向知乎日报 API 发起 GET 请求，获取轮播图和文章列表的数据。在 src 文件夹下，创建一个名为 api 的文件夹，并在其中创建一个 zhihudaily.js 文件：

import axios from 'axios'

// 轮播图 API
const bannerApi = 'https://news-at.zhihu.com/api/4/news/latest'

// 文章列表 API
const articleListApi = 'https://news-at.zhihu.com/api/4/news/before/'

export default {
  // 获取轮播图
  async getBanner () {
    const { data } = await axios.get(bannerApi)
    return data.top_stories
  },

  // 获取文章列表
  async getArticleList (date) {
    const { data } = await axios.get(articleListApi + date)
    return data.stories
  }
}

登录后复制

在 Home.vue 中调用 api 中的方法，将获取到的数据传入对应的 props 中：

<script>
import api from '../api/zhihudaily'
import DailyItem from '../components/DailyItem.vue'
import Banner from '../components/Banner.vue'

export default {
  data () {
    return {
      bannerList: [],
      dailyList: []
    }
  },
  components: {
    DailyItem,
    Banner
  },
  async mounted () {
    this.bannerList = await api.getBanner()
    this.dailyList = await api.getArticleList('')
  }
}
</script>

登录后复制

通过 async/await 语法，我们可以异步地获取需要的数据，使页面效率更高。