tab主题导航的渲染
我们把列表的导航加载进来，官方API的有主体分类ask，share，job，good
所以得出我们的数据itemTab。

itemTab : [
      {'title' : '全部', 'type' : 'all'},
      {'title' : '精华', 'type' : 'good'},
      {'title' : '分享', 'type' : 'share'},
      {'title' : '问答', 'type' : 'ask'},
      {'title' : '招聘', 'type' : 'job'}
]

然后在定义一个输出请求接口的对象：

searchKey : {
     page : 1,
     limit : 20, //每页加载20条
     tab : 'all' //主题 有all ask share job good
}

顺便再定义哥artilist[]空数组来存放等下取出来的数据。

我们要先定义拉取数据的方法函数，我们把拉取到的数据列表放在我们先前定义的artlist[]数组里面，利用vue的双向绑定的特性配合v-for我们就可以把我们的列表页的主题内容渲染出来了。

//获取数据方法
gerArtlist : function() {
    let rqdata = $.param(this.searchKey);
    $.get('https://cnodejs.org/api/v1/topics?' + rqdata, (data) => {
         if(data.success){
              this.artlist = data['data'];
              this.scroll = true;
         }
    })

}
页面刚打开的时候我们要去取第一次的数据

ready : function() {
   this.gerArtlist(this.initIndex);
 });

切换主题的时候我们要给每个item绑定一个事件changeTab($index)，利用$index这个索引，改变我们this.searchKey.tab在去请求数据

// 标签tab切换方法
changeTab : function(index) {
    this.initIndex = index;
    this.searchKey.tab = this.itemTab[index].type;
    this.artlist = [];
    this.searchKey.limit = 20;
    this.gerArtlist(this.initIndex);
}

我们设置的是当前页面打开的时候加载了20条数据，现在我们要实现下拉，超过了一定的区域在去请求下一个20条的内容，就是改变searchKey.limit，每次触发下拉条件就叠加20.

// 超过滚动获取数据方法
scrollArtlist : function() {
    if(this.scroll){
         let totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
         if ($(document).height() <= totalheight + 200) {
             this.scroll = false;
             this.searchKey.limit += 20;
             this.gerArtlist();
         }
    }
}

在ready里面绑定下scroll

ready : function() {
       $(window).on('scroll',() => {
        this.scrollArtlist();
 });

3.2返回顶部组件
在我们的列表页引入返回顶部组件和头部组件作为子组件

components : {
    'nv-header' : require('../components/header.vue'),
    'nv-top' : require('../components/returnTop.vue')
}

返回顶部组件returnTop.vue

<template>
    <div class="return-top" v-show="showTop" v-on:click="returnTop"></div>
</template>
<script>
    export default {
        data : function() {
            return {
                showTop : false
            }
        },
        ready : function() {
            $(window).on('scroll', () => {
                if($(window).scrollTop() > 150){
                    this.showTop = true;
                }else{
                    this.showTop = false;
                }    
            })
        },
        methods : {
            returnTop : function() {
                $(window).scrollTop(0);
                this.showTop = false;
            }
        }
    }
</script>

3.3头部组件

<template>
    <!-- 遮罩层 -->
    <div class="page-cover"  v-show="coverShow" v-on:click="hideMenu"></div>
    <!-- 头部 -->
    <div class="header">
        <span class="left-menu" v-on:click="showMenu"></span>cnode.js
    </div>
    <nv-menu :showm="menuShow"></nv-menu>
</template>
<script>
    export default {
        data : function() {
            return {
                coverShow : false,
                menuShow : false
            }
        },
        methods : {
            showMenu : function() {
                this.coverShow = true;
                this.menuShow = true;
            },
            hideMenu : function() {
                this.coverShow = false;
                this.menuShow = false;
            }
        },
        components : {
            'nv-menu' : require('./menu.vue')
        }
    }
</script>

在我们的header组件中我们引入了一个menu组件，PRops : ['showm']利用父子组件间的通信，给meun绑定了个:class="{'showMeun':showm}"利用css3来实现过渡

<template>
    <div class="meun" :class="{'showMeun':showm}">
        <ul>
            <li v-link="{name:'home'}">首页</li>
            <li v-link="{name : 'search'}">搜索</li>
            <li v-link="{name : 'login'}">登录</li>
            <li v-link="{name : 'login'}">注册</li>
            <li v-link="{name : 'about'}">关于</li>
        </ul>
    </div>
</template>
<script>
    export default {
        props : ['showm']
    }
</script>
<style lang="sass">
    .meun {
        position: fixed;
        top: 0px;
        left:-200px;
        width: 200px;
        height: 100%;
        background: #444444;
        transition: all .3s ease;
        z-index: 99;
        ul {
            padding-top: 3rem;
            li {
                color: #fff;
                padding: 16px 0;
                text-align: left;
                text-indent: 10px;
                line-height: 20px;
                font-size: 20px;
                margin: 0 25px;
            }
        }
    }
    .showMeun {
        transform: translateX(200px);
    }
</style>

结束语

由于是空闲的时间做的，所以只实现了部分功能，后面会继续完善，源码已经放在github