uView自定义底部tabbar

starstarstarl

已于 2022-07-20 15:59:31 修改

阅读量3.9k

点赞数 5

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2022-07-20 15:56:47 首次发布

本文链接：https://blog.youkuaiyun.com/starstarstarl/article/details/125893878

本文介绍了在uni-app中自定义底部tabbar的详细步骤，包括将静态图标放入根目录的static文件夹，创建components文件夹内的tabbar.vue组件，隐藏原生tabbar，全局引用组件，配置pages.json，以及在页面中使用自定义tabbar的方法。通过这些步骤，可以实现个性化且功能完整的tabbar组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.根目录下的static文件夹放入自定义图标

2.根目录下的components文件夹创建tabbar.vue（注意created要隐藏原生tabbar）

<template>
    <view>
        <u-tabbar :value="current?current:0" @change="changeTab" :fixed="true" :placeholder="false"
                  :safeAreaInsetBottom="true" :border="false">
            <u-tabbar-item v-for="(item,index) in list" :key="index" :text="item.text">
                <image class="u-page__item__slot-icon" slot="active-icon" :src="item.iconPath"></image>
                <image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.selectedIconPath"></image>
            </u-tabbar-item>
        </u-tabbar>
    </view>
</template>

<script>
    export default {
        name: "tabbar",
        props: {
            current: Number
        },
        created() {
            //隐藏原生tabbar
            uni.hideTabBar()
        },
        data() {
            return {
                list: [{
                    selectedIconPath: "../../static/images/tabbar/install.png",
                    iconPath: "../../static/images/tabbar/install-active.png",
                    text: '安装单',
                    customIcon: false,
                    pagePath: "pages/install/index"
                },
                    {
                        selectedIconPath: "../../static/images/tabbar/repair.png",
                        iconPath: "../../static/images/tabbar/repair-active.png",
                        text: '维修单',
                        customIcon: false,
                        pagePath: "pages/repair/index"
                    },
                    {
                        selectedIconPath: "../../static/images/tabbar/my.png",
                        iconPath: "../../static/images/tabbar/my-active.png",
                        text: '我的',
                        customIcon: false,
                        pagePath: "pages/my/index"
                    }
                ],
            }
        },
        methods: {
            changeTab(e) {
                console.log(e)
                uni.switchTab({
                    url: '/' + this.list[e].pagePath,
                })
            }
        }
    }
</script>

<style scoped>
    .u-page__item__slot-icon{
        width: 20px!important;
        height: 20px!important;
    }
</style>

3.main.js全局引用自定义tabbar组件

import tabbar from './components/tabbar/tabbar'
Vue.use('tab-bar',tabbar)

4.配置pages.json

 "tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/install/index"
      },
      {
        "pagePath": "pages/repair/index"
      },
      {
        "pagePath": "pages/my/index"
      }
    ]
  }

5.在页面中使用

<template>
    <view>
        <tabbar :current="0"></tabbar>
    </view>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style scoped>

</style>