系列文章目錄

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

文章目錄

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

---

一、背景

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

二、制作頻道組件

2.1 獲取新聞頻道數(shù)據(jù)

• 我們?nèi)匀煌ㄟ^極數(shù)數(shù)據(jù)接口，來獲取新聞頻道的數(shù)據(jù)
  
• 編寫前端Api

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

2.2 組件設(shè)計

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

<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},// 選擇頻道,根據(jù)頻道獲取新聞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>

三、改造主頁

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

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

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

<template><div><!-- 標(biāo)題欄 --><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>

四、效果演示

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。