实现tab左右滑动切换与下拉刷新，上拉加载结合

开门见山，附上我的项目地址，大家可以拉代码看看效果

https://github.com/dccdc/vipList.git

效果图

list.png

首先，要选好你的ui框架

• 我用的是官方的vuetify（讲道理，这个框架对新手不太友好，但是当你熟悉了它的套路后，会发现它功能确实强大，毕竟是亲爹生的），选ui框架的目的就是确定你的tab组件，以及tab切换时怎么和tab页相对应的关系，有的第三方tab插件不能实现滑动切换。
• vuetify框架的每一个tab头部对应一个tab页，利用封装组件的方式，将每个tab页的内容封装为一个组件，然后在组件内部实现下拉刷新，上拉加载。（这里我用的是第三方插件vueScroller，这个用起来也有些坑，后面会详细说明）

关于高度的控制

vueScroller需要设置高度才能展现内容的下拉上拉，我在爬坑时遇到了两种情况：

1. 利用可视高度vh:我在页面的最外层设置了100vh，然后80%高度给了可下拉的内容，20%的高度给了tab头部和其他内容，这样一来，各种功能都正常，似乎是没有问题，但是最让人头疼的设备适配问题来了，在不同的设备上20%的高度对应的px是不一样的，这样tab头部与内容之间就会隔得很开，所以这种方案失败。
2. 给封装的Scroller组件加上100vh：这种方案导致了滚动条的出现，并且由于父级没有实际的高度，无法禁用滚动条，直接舍弃。

解决方案：给最外层父级容器加上100vh，然后tab内容高度设置为100%，tab头部不设高度，采用自适应，此时会相应的出现滚动条，然后禁用掉这个滚动条就好了（使用overflow时，一定要设高度才能禁用）

VueScroller的使用

• 上代码

            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);
            },

• 注意的点
  1. 页面初次加载时，会调用infinite函数加载数据，所以需要做一个判断，判断第一次加载时，page不能增加，以免导致上拉加载的page出错。
  2. 当数据不满一页时，下拉刷新会调用infinite函数，此处需要重置一下page。
  3. 无限加载问题：上拉加载时，当接口返回的数据为空时，需要手动调用vueScroller的finishInfinite(true)函数来停止加载，否则就会导致无限加载的问题。

    this.$refs.myscroller.finishInfinite(true);
//当参数为false时，上拉获取数据可以重新调用。当参数为true，上拉获取数据回调函数停止使用,下拉下部不再显示loading，会显示‘暂无更多数据’