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 語法,我們可以非同步地取得所需的數據,使頁面效率更高。
在這篇文章中,我們用Vue 技術實作了一個仿知乎日報的頁面設計,涉及了元件、輪播圖、資料獲取等知識點。組件化開發讓開發者可以更好地維護和擴展程式碼,使用第三方程式庫(如 Swiper、axios)可以快速地實現功能,使得開發效率更高。
不斷拓展自己的知識庫,開拓視野,不斷探索,才能在 Web 開發的道路上走得更遠。
以上是如何使用 Vue 實現仿知日報的頁面設計?的詳細內容。更多資訊請關注PHP中文網其他相關文章!