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

源码已上传至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>
                    <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>