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

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"
				}],
				
			}
		},

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>

让我看看有谁还没有点赞