源码已上传至https://github.com/anymouschina/daily，

下载后请先

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><Itemv-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'"><Itemv-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>

VUE实战知乎日报源码以及BUG分析相关推荐

VUE实战-知乎日报(2)
配置基本html,main.js html代码如下:只要引入main.js即可 <!DOCTYPE html> <html> <head><meta char ...
杀了一个程序员祭天换来今天的正常推送：仿知乎APP源码分享
原创 2017-09-19 菜鸟君菜鸟窝官网 ▲点击上方蓝色字体关注后免费领取"200套开源项目" 菜鸟窝技术文章编辑招募中,可免费学习优秀实战课程,有兴趣快加菜鸟君微信:kee ...
Vue 合同模板_vue源码逐行注释分析+40多m的vue源码程序流程图思维导图
vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了,差ddf那部分,因为考虑到自己要换 ...
java计算机毕业设计vue学习视频课程网站源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue学习视频课程网站源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue学习视频课程网站源码+mysql数据库+系统+lw文档+部署本源码技术栈: 项目 ...
java计算机毕业设计Vue框架龙猫宠物交易平台源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计Vue框架龙猫宠物交易平台源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计Vue框架龙猫宠物交易平台源码+mysql数据库+系统+lw文档+部署本源码技术栈 ...
Nginx实战基础篇一源码包编译安装部署web服务器
Nginx实战基础篇一源码包编译安装部署web服务器版权声明: 本文遵循"署名非商业性使用相同方式共享 2.5 中国大陆"协议您可以自由复制.发行.展览.表演.放映.广播或通 ...
基于SpringBoot vue的电脑商城平台源码和论文含支付宝沙箱支付
演示视频: 基于SpringBoot vue的电脑商城平台源码和论文含支付宝沙箱支付演示视频支付宝沙箱: package com.java.controller;import java.util.* ...
java计算机毕业设计vue.js开发红酒网站源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue.js开发红酒网站源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue.js开发红酒网站源码+mysql数据库+系统+lw文档+部署本源码技术栈: ...
java计算机毕业设计基于springboot+vue+elementUI的旅游网站(源码+数据库+Lw文档）
项目介绍旅游管理平台采用B/S模式,促进了旅游管理平台的安全.快捷.高效的发展.传统的管理模式还处于手工处理阶段,管理效率极低,随着用户的不断增多,传统基于手工管理模式已经无法满足当前用户需求,随着 ...

VUE实战知乎日报源码以及BUG分析

源码已上传至https://github.com/anymouschina/daily，

VUE实战知乎日报源码以及BUG分析相关推荐

最新文章

热门文章