开门见山，附上我的项目地址，大家可以拉代码看看效果
https://github.com/dccdc/vipList.git
效果图
list.png
首先，要选好你的ui框架
- 我用的是官方的vuetify（讲道理，这个框架对新手不太友好，但是当你熟悉了它的套路后，会发现它功能确实强大，毕竟是亲爹生的），选ui框架的目的就是确定你的tab组件，以及tab切换时怎么和tab页相对应的关系，有的第三方tab插件不能实现滑动切换。
- vuetify框架的每一个tab头部对应一个tab页，利用封装组件的方式，将每个tab页的内容封装为一个组件，然后在组件内部实现下拉刷新，上拉加载。（这里我用的是第三方插件vueScroller，这个用起来也有些坑，后面会详细说明）
关于高度的控制
vueScroller需要设置高度才能展现内容的下拉上拉，我在爬坑时遇到了两种情况：
- 利用可视高度vh:我在页面的最外层设置了100vh，然后80%高度给了可下拉的内容，20%的高度给了tab头部和其他内容，这样一来，各种功能都正常，似乎是没有问题，但是最让人头疼的设备适配问题来了，在不同的设备上20%的高度对应的px是不一样的，这样tab头部与内容之间就会隔得很开，所以这种方案失败。
- 给封装的Scroller组件加上100vh：这种方案导致了滚动条的出现，并且由于父级没有实际的高度，无法禁用滚动条，直接舍弃。
解决方案：给最外层父级容器加上100vh，然后tab内容高度设置为100%，tab头部不设高度，采用自适应，此时会相应的出现滚动条，然后禁用掉这个滚动条就好了（使用overflow时，一定要设高度才能禁用）
VueScroller的使用
- 上代码
<template>
<div style="height: 100%;" >
<scroller ref="myscroller" noDataText="我是有底线的"
:on-refresh="refresh" :on-infinite="infinite" >
<!-- content goes here -->
</v-list>
</scroller>
</div>
</template>
refresh(done) {
var page = 1;
this.page = 1;//当数据不满一页时，刷新时会调用infinite函数，此处重置一下page
this.getData(done,page,this.message);
},
infinite(done) {
if(this.firstLoading){//第一次加载时，页码不加1
this.firstLoading = false;
}else{
this.page++;
}
this.getData(done,this.page,this.message);
},
- 注意的点
- 页面初次加载时，会调用infinite函数加载数据，所以需要做一个判断，判断第一次加载时，page不能增加，以免导致上拉加载的page出错。
- 当数据不满一页时，下拉刷新会调用infinite函数，此处需要重置一下page。
- 无限加载问题：上拉加载时，当接口返回的数据为空时，需要手动调用vueScroller的finishInfinite(true)函数来停止加载，否则就会导致无限加载的问题。
this.$refs.myscroller.finishInfinite(true);
//当参数为false时，上拉获取数据可以重新调用。当参数为true，上拉获取数据回调函数停止使用,下拉下部不再显示loading，会显示‘暂无更多数据’
