App 底部 tabbar
- jp-bottom-tab 是一个 App tabbar 的自定义实现
- 一般情况下推荐使用原生的 tabbar，性能较好，原生 tabbar 之间的切换不会再次渲染。
- 该组件适用于项目复杂度较小、且对 tabbar 要求特殊的项目，只提供一种示例，具体实现可修改代码
基本使用
vue
<template>
<jp-bottom-tab :tab-list="attribute.tabList" @index-change="indexChange"></jp-bottom-tab>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const attribute = reactive({
tabList: [
{ select_img: '/static/example/ic_homepage_selected.png', img: '/static/example/ic_homepage_normal.png', title: '工单' },
{ select_img: '/static/example/ic_homepage_selected.png', img: '/static/example/ic_homepage_normal.png', title: '' },
{ select_img: '/static/example/ic_find_normal.png', img: '/static/example/ic_find_normal.png', title: '我的' }
]
})
const indexChange = (e) => {
console.log(e)
}
</script>
<style scoped lang="scss"></style>