vue-layout-tab

usage

install

yarn add vue-layout-tab

example

<v-tab :headers="headers">
  <template slot="0">
    <VueScroll>
      建议使用 better-scroll
    </VueScroll>
  </template>
  <template slot="1">
    <p>非 routable 模式下，template 个数与 headers 的长度相同</p>
  </template>
</v-tab>

args

name	type	default	required	meaning
headers		[]	Y	tab-header 的数组，支持 icon
default-index		0	N	默认选中的 tab index
routable		false	N	设为 true 则为路由模式
animated		false	N	是否支持切换动画
duration		300	N	切换动画的时长，ms
align		around	N	tab 的展示模式 ['around', 'start', 'center', 'end']
swipe		false	N	是否支持左右手势滑动
sticky		false	N	是否让 tab-header 吸附在页面顶部

tips

1. tab 较多时建议align：start
2. swipe: true的时候建议使用better-scroll
3. 使用better-scroll的使用，建议sticky: true
4. headers可以是字符串数组，也可以是对象数组，routable: true时，使用对象数组，每个tab有route属性，为指向页面的name
5. routable：true的时候，不需要<template slot>

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Lints and fixes files

yarn run lint