多tab滚动容器,基于better-scroll实现(原生的滚动坑很多),支持位置保持,侧滑切tab,tab自动吸顶等功能。文章主要参考闲鱼的思路(见参考),这里基于vue实现一遍。欢迎交流。
在线演示
http://39.98.139.162:3001/demo
说明
基于better-scroll实现。 只接入了上拉加载更多的功能,需要更多功能请看 better-scroll.github.io/docs/zh-CN/…
接入
npm i multi-tab --save 或 yarn add multi-tab -S
<multi-tab :tabList="tabList" v-model="tabIndex" @click="onClick">
<div
slot="header"
style="height:150px;background:#a8a8a8;position:sticky;top:0; display:flex;justify-content: center;align-items: center;"
>
header区域
</div>
<!-- <div slot="nav">自定义tabs</div> -->
<div v-for="(item, index) in tabList" :slot="index" :key="index" style="min-height: 1px">
<page :ref="`page${index}`"></page>
</div>
</multi-tab>
import MultiTab from 'multi-tab'
export default {
components: {
'multi-tab': MultiTab
}
}
复制代码
demo
src/library/components/multiTab/demo