【uni-app 自定义底部导航可页面跳转】_uniapp自定义底部导航怎么跳转-优快云博客

本文链接：https://blog.youkuaiyun.com/TChildeSeven/article/details/107629864

本文详细介绍如何在uni-app中自定义底部导航栏，并实现页面跳转功能。通过组件化方式，设置底部图标、文字及选中状态，同时提供跳转链接至不同页面的示例代码。

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

uni-app 自定义底部导航可页面跳转

效果图：
在这里插入图片描述

1.写好模板放数据内容，这个自定义底部我是按照组件格式去写的，如何写组件和使用组件，直接放在页面上也能用

<template>
	<view>
		<view class="bot_nav" style="position: relative;">

		</view>
		<view class="bot_nav " style="position: fixed;">
			<view class="fle1 fle_all " :class="item.is_click?'cur':''" v-for="(item,index) in bot_nav" :key='index' @tap="bot_nav_click(index)">
				<view class="fle fle_col">
					<view class="fle_sta fle_all wth100">
						<view class="img">
							<image :src="item.img_click_src" mode="" v-if="index == bot_cli"></image>
							<image :src="item.img_src" mode="" v-if="index != bot_cli"></image>
						</view>
					</view>
					<view class="fle_end wth100 fle_all">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

2.初始化数据

（博主的基本样式复制处）

初始化底部图片(图片放在static里)，底部字样，选中后的图片，跳转链接

		props:{
			bot_cli:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				bot_nav: [{
					img_src: "../../../static/01.png",
					name: "首页",
					img_click_src: "../../../static/02.png",
					src:"../../tabBar/homePage/homePage"
				}, {
					img_src: "../../../static/01.png",
					name: "分类",
					img_click_src: "../../../static/02.png",
					src:"../../tabBar/function/function"
				}, {
					img_src: "../../../static/01.png",
					name: "商城",
					img_click_src: "../../../static/04.png",
					src:"../../tabBar/personal/personal"
				}, {
					img_src: "../../../static/01.png",
					name: "个人中心",
					img_click_src: "../../../static/05.png",
					src:"../../tabBar/homePage/homePage"
				}],
				
			}
		},


//样式
	.bot_nav{
		border-top: 1rpx solid #eee;
		position: absolute;
		bottom: 0%;
		height: 120rpx;
		width: 100%;
		color: #999;
		background-color: white;
		display: flex;
		z-index: 99;
	}
	.bot_nav .img{
		width: 40rpx;
		height: 40rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		background-color: #ccc;
	}
	.bot_nav .cur{
		color: #333;
	}

3.写方法

点击方法保存全局数据（点击了哪一个），跳转至相应的tabbra页面的链接

		methods: {
			bot_nav_click(e) {
				uni.redirectTo({
				    url: this.bot_nav[e].src
				});

			}
			
		}

4.main.js全局引用这个底部组件

如果是直接放在页面上就不需要以下步骤

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

import comeBack from './pages/component/come-back/come-back.vue'//挂载
Vue.component('comeBack',comeBack) //挂载
import botton from './pages/component/botton/botton.vue'//挂载
Vue.component('botton',botton) //挂载

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

5.页面直接写标签名就可以使用

需要改里面的字样或者图片在组件里改就可以了，给组件一个提示当前是那个页面已点击

<template>
	<view>
		<botton bot_cli="0"></botton>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

让我看看有谁还没有点赞