系列文章目錄

Vue基礎篇一：編寫第一個Vue程序
Vue基礎篇二：Vue組件的核心概念
Vue基礎篇三：Vue的計算屬性與偵聽器
Vue基礎篇四：Vue的生命周期（秒殺案例實戰）
Vue基礎篇五：Vue的指令
Vue基礎篇六：Vue使用JSX進行動態渲染
Vue提高篇一：使用Vuex進行狀態管理
Vue提高篇二：使用vue-router實現靜態路由
Vue提高篇三：使用vue-router實現動態路由
Vue提高篇四：使用Element UI組件庫
Vue提高篇五：使用Jest進行單元測試
Vue提高篇六： 使用Vetur+ESLint+Prettier插件提升開發效率
Vue實戰篇一： 使用Vue搭建注冊登錄界面
Vue實戰篇二： 實現郵件驗證碼發送
Vue實戰篇三：實現用戶注冊
Vue實戰篇四：創建多步驟表單
Vue實戰篇五：實現文件上傳
Vue實戰篇六：表格渲染動態數據
Vue實戰篇七：表單校驗
Vue實戰篇八：實現彈出對話框進行交互
Vue實戰篇九：使用省市區級聯選擇插件
Vue實戰篇十：響應式布局
Vue實戰篇十一：父組件獲取子組件數據的常規方法
Vue實戰篇十二：多項選擇器的實際運用
Vue實戰篇十三：實戰分頁組件
Vue實戰篇十四：前端excel組件實現數據導入
Vue實戰篇十五：表格數據多選在實際項目中的技巧
Vue實戰篇十六：導航菜單
Vue實戰篇十七：用樹型組件實現一個知識目錄
Vue實戰篇十八：搭建一個知識庫框架
Vue實戰篇十九：使用printjs打印表單
Vue實戰篇二十：自定義表格合計
Vue實戰篇二十一：實戰Prop的雙向綁定
Vue實戰篇二十二：生成二維碼
Vue實戰篇二十三：卡片風格與列表風格的切換
Vue實戰篇二十四：分頁顯示
Vue實戰篇二十五：使用ECharts繪制疫情折線圖
Vue實戰篇二十六：創建動態儀表盤
Vue實戰篇二十七：實現走馬燈效果的商品輪播圖
Vue實戰篇二十八：實現一個手機版的購物車
Vue實戰篇二十九：模擬一個簡易留言板
Vue項目實戰篇一：實現一個完整的留言板（帶前后端源碼下載）
Vue實戰篇三十：實現一個簡易版的頭條新聞

文章目錄

• 系列文章目錄
• 一、背景
• 二、制作頻道組件
• • 2.1 獲取新聞頻道數據
  • 2.2 組件設計
• 三、改造主頁
• 四、效果演示

---

一、背景

• 在上一篇文章中，我們實現了一個簡易版的頭條新聞，這次我們做個改進。
• 加入新聞頻道，可以讓用戶選擇不同的頻道，閱讀新聞。
  

二、制作頻道組件

2.1 獲取新聞頻道數據

• 我們仍然通過極數數據接口，來獲取新聞頻道的數據
  
• 編寫前端Api

import axios from 'axios'axios.defaults.baseURL = '/apis'// 向極速數據免費新聞接口獲取新聞頻道 export function getNewChannel() {return new Promise((resolve, reject) => {axios.get('/news/channel?appkey=自己在極速數據上申請的appkey').then(res => {resolve(res)}).catch(error => { reject(error) })}) }

2.2 組件設計

• 我們需要單獨編寫一個頻道組件，主要包含以下這些功能：
  1、橫向展示頻道列表
  
  2、可左右滑動
  
  3、選擇頻道后，獲取頻道對應的新聞列表
  
  4、將選擇的頻道、新聞列表、刷新狀態放入狀態管理器中存儲，供主頁刷新調用
  
• 以下是頻道組件的完整代碼
  

<template><div class="channel-box"><div class="channel-list"><ul ref="channelList" :style="{ left: -nowLeft + 'px' }"><li v-for="(item, index) in list" :key="index" :ref="'li' + index"><span class="channel" :class="{ 'channel-active': id === item.id }" @click="selectChannel(item)">{{ item.tag_name }}</span></li></ul></div><div class="icon-lf"><i v-show="showLf" class="el-icon-arrow-left" @click="handleLeft" /></div><div class="icon-rt"><i v-show="showRt" class="el-icon-arrow-right" @click="handleRight" /></div></div> </template><script> import { getNewChannel, getNewList } from '@/api/news' export default {data() {return {list: [],id: 0,fixedWidth: 200,nowNum: 0,showLf: false,showRt: false,allWidth: 0,nowLeft: 0,nowIndex: 0 }},mounted() {this.getChannel().then(res => {console.log('channel', res)if (res && res.status === 200 && res.data.status === 0) {this.list = []res.data.result.forEach((element, index) => {this.list.push({ 'id': index, 'tag_name': element })})this.$nextTick(() => {this.allWidth = this.$refs.channelList.offsetWidthif (this.allWidth > this.fixedWidth) {this.showRt = true}this.selectChannel({ id: 0, tag_name: '頭條' })})}})},methods: {// 異步獲取頻道async getChannel() {const data = await getNewChannel()return data},// 選擇頻道,根據頻道獲取新聞selectChannel(item) {this.$store.commit('SET_LOADING', true)this.$store.commit('SET_CHANNEL', item.tag_name)this.getNews(item.tag_name).then(res => {console.log('news', res)if (res) {scrollTo(0, 0)this.$store.commit('SET_NEWS', res.data.result.list)this.id = item.id}this.$store.commit('SET_LOADING', false)})},// 異步獲取新聞async getNews(channel) {const data = await getNewList(channel)return data},// 頻道列表左移handleLeft() {if (this.nowLeft > 0) {this.nowNum--this.showRt = trueif (this.nowNum > 0) {let nw = 0for (let j = this.list.length; j >= 0; j--) {if (j < this.nowIndex) {nw += this.$refs['li' + j][0].offsetWidthif (nw >= this.fixedWidth) {nw -= this.$refs['li' + j][0].offsetWidththis.nowLeft -= nwthis.nowIndex = j + 1break}}}} else {this.nowLeft = 0this.nowIndex = 0this.showLf = false}}},// 頻道列表右移handleRight() {if (this.nowLeft + this.fixedWidth < this.allWidth) {this.nowNum++this.showLf = truelet nw = 0for (let i = 0; i < this.list.length; i++) {if (i >= this.nowIndex) {nw += this.$refs['li' + i][0].offsetWidthif (nw > this.fixedWidth) {nw -= this.$refs['li' + i][0].offsetWidththis.nowLeft += nwthis.nowIndex = ibreak}}}if (this.nowLeft + this.fixedWidth >= this.allWidth) {this.showRt = false}}}} } </script><style lang="scss" scoped> .channel-box {width: 100%;padding: 0 20px;height: 46px;position: fixed;align-items: center;top: 1.2rem;font-size: 18px;letter-spacing: 3px;background-color: rgb(252, 248, 248);.channel-list {width: 100%;height: 100%;overflow: hidden;position: relative;margin-top: 0.2rem;ul {transition-duration: 0.3s;position: absolute;top: 0px;left: 0px;margin: 0;padding: 0;display: flex;flex-wrap: nowrap;li {white-space: nowrap;display: inline-block;white-space: nowrap;padding: 0 10px;}li:first-child {padding-left: 0;}li:last-child {padding-right: 0;}}.channel {cursor: pointer;display: inline-block;height: 28px;line-height: 28px;transition: border-color 0.2s;&:hover {color: #e72521;}}.channel-active {color: #e72521;}}.icon-lf {cursor: pointer;line-height: 30px;position: absolute;left: 5px;top: 6px;}.icon-rt {line-height: 30px;cursor: pointer;position: absolute;right: 5px;top: 6px;} } </style>

三、改造主頁

• 我們將頻道組件，放入主頁，進行改造
  1、主頁判斷狀態管理器的刷新狀態，如果刷新狀態為true，則顯示加載頁面
  
  

2、主頁判斷狀態管理器的刷新狀態，如果刷新狀態為false，則顯示新聞列表

• 以下是改造后的完整源碼：

<template><div><!-- 標題欄 --><div class="header"><span /><span>頭條新聞</span><span /></div><channel /><!-- 新聞列表 --><div class="nav-content"><div v-if="loading == false" class="newsContent"><divv-for="(item, index) in newData":key="index"class="section"@click="toNews(index)"><div class="news"><div class="news-left"><img :src="item.pic" alt=""></div><div class="news-right"><div class="newsTitle">{{ item.title }}</div><div class="newsMessage"><span>{{ item.time }}</span><span>{{ item.src }}</span></div></div></div></div></div><el-mainv-elsev-loading="loading"class="load"element-loading-background="rgba(0,0,0,0)"element-loading-text="正在加載中"/></div></div> </template><script> import Channel from './channel' export default {name: 'Home',components: { Channel },data() {return {}},computed: {newData() {return this.$store.state.news.newsData},loading() {return this.$store.state.news.loading}},methods: {toNews(index) {this.$store.commit('SET_NEWS_INDEX', index)this.$router.push('/news')}}} </script><style lang="scss" scoped> .header {width: 100%;height: 1.2rem;background-color: #d43d3d;display: flex;justify-content: space-between;align-items: center;color: #fff;font-size: 20px;font-weight: 700;letter-spacing: 3px;z-index: 99;position: fixed;top: 0;img {width: 0.67rem;height: 0.67rem;cursor: pointer;} }.nav-content {margin-top: 2.5rem; } .nav {width: 100%;height: 0.96rem;background-color: #f4f5f6;display: flex;position: fixed;z-index: 98; }.section {width: 100%;height: 2.5rem;border-bottom: 1px solid #ccc; } .newsContent {padding-top: 0rem; } .news {height: 2.25rem;box-sizing: border-box;margin: 10px 10px;display: flex; } .news-left {height: 100%;width: 2.8rem;display: inline-block; } .news-left img {width: 100%;height: 100%; } .news-right {flex: 1;padding-left: 10px; } .newsTitle {width: 100%;height: 62%;color: #404040;font-size: 17px;overflow: hidden; } .newsMessage {width: 100%;height: 38%;display: flex;align-items: flex-end;color: #888;justify-content: space-between; } .load {width: 100%;height: 100%;overflow: hidden; } </style>

四、效果演示

總結

以上是生活随笔為你收集整理的Vue实战篇三十一：实现一个改进版的头条新闻的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。