uni-app uView自定义底部导航栏

因项目需要自定义底部导航栏,我把它写在了组件里,基于uView2框架写的(vue2);

一、代码

在components下创建tabbar.vue文件,代码如下:

javascript 复制代码
<template>
    <view>
    <u-tabbar :value="current?current:0" @change="changeTab" :fixed="true" :placeholder="false"
        :safeAreaInsetBottom="true" :border="false" activeColor="#40c6a2" inactiveColor="#B9BCBF">
        <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.selectedIconPath"></image>
            <image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.iconPath"></image>
        </u-tabbar-item>
    </u-tabbar>
    </view>
</template>

<script>
    export default {
        name: "TabBar",
        props: {
            current: Number
        },
        data() {
            return {
                list: [{
                    iconPath: "/static/images/salesRecords.png",
                    selectedIconPath: "/static/images/salesRecords_a.png",
                    pagePath: "pages/salesRecords/index",
                    text: "销售记录",
                    customIcon: false,
                }, {
                    iconPath: "/static/images/mine.png",
                    selectedIconPath: "/static/images/mine_a.png",
                    pagePath: "pages/mine/index",
                    text: "个人中心",
                    customIcon: false,
                }],
            }
        },
        methods: {
            // 跳转页面
            changeTab(e) {
                uni.switchTab({
                    url: '/' + this.list[e].pagePath,
                })
            }
        }
    }
</script>

app.vue(有没有大佬知道为什么这个样式加载app.vue里才生效)

css 复制代码
/* 导航样式 */
.u-tabbar__content {
    box-shadow: 0rpx 0rpx 10rpx 2rpx rgba(180, 203, 199, 0.4);
}  
.u-page__item__slot-icon {
    width: 40rpx;
    height: 40rpx;
}

二、配置

pages.json配置

javascript 复制代码
"tabBar": {
		"custom": true,
		"list": [
			{
				"pagePath": "pages/salesRecords/index"
			}, 
			{
				"pagePath": "pages/mine/index"
			}
		]
	},

三、使用

页面使用:****( mine.vue**)**

注: current是底部导航栏的下标,你在tabbar页面的list中写的页面下标从0开始依次递增(如:我这个mine.vue的下标是1,在页面里引用组件时要加上**:current="1"**)

有不懂的可以留言...

相关推荐
duandashuaige23 分钟前
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
javascript·typescript·electron·npm·vue·html
渣哥1 小时前
当容器里有多个 Bean,@Qualifier 如何精准定位?
javascript·后端·面试
云枫晖1 小时前
深入浅出npm:现代JavaScript项目基石
前端·javascript·node.js
不一样的少年_1 小时前
你家孩子又偷玩网页游戏? 试试这个防沉迷工具
前端·javascript·浏览器
掘金安东尼1 小时前
前端周刊第436期(2025年10月13日–10月19日)
前端·javascript·github
勤奋菲菲2 小时前
深入理解HTML文本标签:构建网页内容的基础
前端·html
昔人'2 小时前
html`<mark>`
前端·javascript·html
盛夏绽放2 小时前
关于 uni-app 与原生微信小程序中的生命周期 —— 一次“生命旅程”的解读
微信小程序·小程序·uni-app
前端拿破轮2 小时前
从0到1搭一个monorepo项目(二)
前端·javascript·面试
SuperherRo3 小时前
JS逆向-安全辅助项目&Yakit热加载&魔术方法&模版插件语法&JSRpc进阶调用&接口联动
javascript·安全·yakit·jsrpc·热加载