生活随笔
收集整理的這篇文章主要介紹了
Vue实战篇三十一:实现一个改进版的头条新闻
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
系列文章目錄
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'
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
.offsetWidth
if (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].offsetWidth
if (nw
>= this.fixedWidth
) {nw
-= this.$refs
['li' + j
][0].offsetWidth
this.nowLeft
-= nw
this.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].offsetWidth
if (nw
> this.fixedWidth
) {nw
-= this.$refs
['li' + i
][0].offsetWidth
this.nowLeft
+= nw
this.nowIndex
= i
break}}}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)容還不錯,歡迎將生活随笔推薦給好友。