Multi-tab scroll container, based on the better Scroll implementation (many native scroll pits), support position holding, side slide cutting TAB, TAB automatic top drawing and other functions. This article mainly refers to the idea of idle fish (see reference), here based on VUE implementation. Welcome to exchange.

The online demo

http://39.98.139.162:3001/demo

instructions

Based on better Scroll implementation. [bug Mc-10866] – more functions for loading and loading are added, see better-scroll.github. IO /docs/ zh-cn /…

Access to the

NPM I multi-tab — Save or 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 field </div> <! - < div slot = "nav" > custom 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 } }Copy the code

demo

src/library/components/multiTab/demo

The source code

Github.com/lizhuang93/…

reference

Juejin. Cn/post / 700835…

Market.m.taobao.com/app/idleFis…