首頁  >  文章  >  web前端  >  如何使用 Vue 實現仿知日報的頁面設計?

如何使用 Vue 實現仿知日報的頁面設計?

WBOY
WBOY原創
2023-06-25 12:08:042014瀏覽

Vue.js 是一種基於 MVVM 模式的前端框架,透過資料綁定和元件化的方式將資料和 UI 頁面進行了解耦,使 Web 開發更加高效和簡單。知乎日報是一種新聞用戶端,有著美觀的 UI 設計,強大的互動性以及內容多樣性。在本篇文章中,我們將透過 Vue 技術實現一個仿知乎日報的頁面設計。

  1. 建置環境

在開始之前,我們需要先安裝 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 的資料夾作為項目根目錄。

  1. 頁面佈局

在仿知日報中,主要分為首頁、文章列表頁和文章詳情頁三個頁面,在這裡我們以首頁為例。在 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 用於顯示文章清單。

  1. 使用元件

為了方便多用和維護,我們使用 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。

  1. 輪播圖實作

仿知乎日報的輪播圖是該頁面的重要組成部分。在 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 元件中。

  1. 資料取得

在仿知日報中,首頁需要展示文章清單和輪播圖。我們使用 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 語法,我們可以非同步地取得所需的數據,使頁面效率更高。

  1. 結語

在這篇文章中,我們用Vue 技術實作了一個仿知乎日報的頁面設計,涉及了元件、輪播圖、資料獲取等知識點。組件化開發讓開發者可以更好地維護和擴展程式碼,使用第三方程式庫(如 Swiper、axios)可以快速地實現功能,使得開發效率更高。

不斷拓展自己的知識庫,開拓視野,不斷探索,才能在 Web 開發的道路上走得更遠。

以上是如何使用 Vue 實現仿知日報的頁面設計?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn