vue+better-scroll实现多tab选项卡上拉加载更多的实践例子

 闲话少说,先上效果

vue+better-scroll实现多tab选项卡上拉加载更多的实践例子_第1张图片

项目中会经常遇到类似这样的多tab切换的需求,tab可以点击,可以滑动。每个tab的内容还需要上拉加载刷新。

没有办法,好好研究一下,做个记录。以防来日不时之需。

还有对vue不熟悉的,可以先去看看这个vue+webpack 从入门到精通(基础篇)

项目中上拉加载用到了很好用的工具better-scroll,各位可能都知道。

关于better-scroll详细的请去这里看看--https://github.com/ustbhuangyi/better-scroll

1、使用better-scroll的基本条件(须知)

  • 必须包含两个大的div,外层和内层div
  • 外层div设置可视的大小(宽或者高)-有限制宽或高
  • 内层div,包裹整个可以滚动的部分
  • 内层div高度一定大于外层div的宽或高,才能滚动

建议大家还是下载源码看吧,项目地址如下:
https://github.com/catbea/tabsLoadMore

如有疑问,请留言。

 

你可能感兴趣的:(前端,vue,better-scroll,吹过麦田的风)