源码已上传至 下载后请先
npm install
npm run dev
记住开启代理服务，即在当前文件下的终端下使用 node proxy.js
运行如下，获取http://news-at.zhihu.com/的实时内容，所有代码来自手敲，copy from 《Vue.js实战》
运行后发现，使用v-for指令时的关键字需要自行设置，通常为渲染的{{key}}，另有一BUG，如果当日更新的内容不够多，即主题栏没能出现滚动条，无法触发滚动事件，无法加载访问昨日至过去的内容，
解决方案 1：
使用style固定生成滚动条，当触发滚动事件渲染过去的日报。
//style.css
.daily-list{
width: 300px;
position: fixed;
top: 0;
bottom: 0;
left: 150px;
overflow-y:scroll;
overflow-x:hidden;
table-layout: fixed;
word-wrap:break-word;
word-break:break-all;
border-right: 1px solid #d7dde4;
}
方案二：更换刷新时间，使用点击加载更多按钮
<template>
<div class="daily">
<div class="daily-menu">
<div class="daily-menu-item"
@click="handleToRecommend"
:class="{ on: type === 'recommend' }">每日推荐</div>
<div class="daily-menu-item"
:class="{ on: type === 'daily' }"
@click="showThemes = !showThemes">主题日报</div>
<ul v-show="showThemes">
<li v-for="item in themes" :key="item.id">
<a
:class="{ on: item.id === themeId && type === 'daily' }"
@click="handleToTheme(item.id)">{{ item.name }}</a>
</li>
</ul>
</div>
<div class="daily-list" ref="list">
<template v-if="type === 'recommend'">
<div v-for="list in recommendList" :key="formatDay(list.date)">
<div class="daily-date">{{ formatDay(list.date) }}</div>
<Item
v-for="item in list.stories"
:data="item"
:key="item.id"
@click.native="handleClick(item.id)"></Item>
</div>
</template>
<button id="more" ref="more" >加载更多</button>
<template v-if="type === 'daily'">
<Item
v-for="item in list"
:data="item"
:key="item.id"
@click.native="handleClick(item.id)"></Item>
</template>
</div>
<daily-article :id="articleId"></daily-article>
</div>
</template>
<script>
import Item from './components/item.vue';
import dailyArticle from './components/daily-article.vue';
import $ from './libs/util';
export default {
components: { Item, dailyArticle },
data () {
return {
themes: [],
showThemes: false,
type: 'recommend',
recommendList: [],
dailyTime: $.getTodayTime(),
list: [],
themeId: 0,
articleId: 0,
isLoading: false
}
},
methods: {
handleToRecommend () {
this.type = 'recommend';
this.recommendList = [];
this.dailyTime = $.getTodayTime();
this.getRecommendList();
},
handleToTheme (id) {
this.type = 'daily';
this.themeId = id;
this.list = [];
$.ajax.get('theme/' + id).then(res => {
this.list = res.stories
.filter(item => item.type !== 1);
})
},
getThemes () {
$.ajax.get('themes').then(res => {
this.themes = res.others;
})
},
getRecommendList () {
this.isLoading = true;
const prevDay = $.prevDay(this.dailyTime + 86400000);
$.ajax.get('news/before/' + prevDay).then(res => {
this.recommendList.push(res);
this.isLoading = false;
})
},
formatDay (date) {
let month = date.substr(4, 2);
let day = date.substr(6, 2);
if (month.substr(0, 1) === '0') month = month.substr(1, 1);
if (day.substr(0, 1) === '0') day = day.substr(1, 1);
return `${month} 月 ${day} 日`;
},
handleClick (id) {
this.articleId = id;
},
loadingMore(){
this.dailyTime -= 86400000;
this.getRecommendList();
}
},
mounted () {
this.getRecommendList();
this.getThemes();
const $loading = this.$refs.more;
$loading.addEventListener('click', () => {
if (this.type === 'daily' || this.isLoading) return;
this.dailyTime -= 86400000;
this.getRecommendList();
});
}
}
</script>
