Skip to content
目录

tab 选项卡-v2

  • jp-tabbar 组件是通过 inject 方式实现的,对于特殊场景,如果他不适用,可以考虑扩展一下 jp-tabbar-v2 版本

基本使用

vue
<template>
  <jp-tabbar-v2 v-model="attribute.active" :tab-list="[{ title: '水果' }, { title: '蔬菜' }, { title: '家电' }, { title: '熟食' }]"></jp-tabbar-v2>
  <h3 class="mx-3 mt-3">内容较多时</h3>
  <jp-tabbar-v2
    v-model="attribute.active"
    :tab-list="[
      { title: '水果' },
      { title: '蔬菜' },
      { title: '家电' },
      { title: '熟食' },
      { title: '水果' },
      { title: '蔬菜' },
      { title: '家电' },
      { title: '熟食' }
    ]"
  ></jp-tabbar-v2>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
const attribute = reactive({
  active: 0
})
</script>

<style scoped lang="scss"></style>

©2022 By 绝配移动端组件库