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

_多行不e必自闭
1,965 阅读3分钟
开门见山，先看一波效果图

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的使用

  • 安装

    使用npm 安装 npm i vue-scroller -S

  • main.js中使用

    import VueScroller from 'vue-scroller'
Vue.use(VueScroller)

  • 上代码

    <template>
	<div style="height: 100%;" >
		<scroller  ref="myscroller" noDataText="我是有底线的" 
                  :on-refresh="refresh" :on-infinite="infinite" >
			<!-- content goes here -->
			
				
		
		</scroller>
	</div>
</template>

                refresh(done) {
				var page = 1;
				this.page = 1;//当数据不满一页时，刷新时会调用infinite函数，此处重置一下page
				this.getData(done,page);
			},
			infinite(done) {
				if(this.firstLoading){//第一次加载时，页码不加1
					this.firstLoading = false;
				}else{
					this.page++;
				}
				this.getData(done,this.page);
			},

  • 注意的点

    1. 页面初次加载时，会调用infinite函数加载数据，所以需要做一个判断，判断第一次加载时，page不能增加，以免导致上拉加载的page出错。
    2. 当数据不满一页时，下拉刷新会调用infinite函数，此处需要重置一下page。
    3. 无限加载问题：上拉加载时，当接口返回的数据为空时，需要手动调用vueScroller的finishInfinite(true)函数来停止加载，否则就会导致无限加载的问题。
    	this.$refs.myscroller.finishInfinite(true);
//当参数为false时，上拉获取数据可以重新调用。当参数为true，上拉获取数据回调函数停止使用,下拉下部不再显示loading，会显示‘暂无更多数据’
avatar
文章
阅读
粉丝