uni-app 点击footer导航实现样式的切换和路由的跳转

需求：
点击切换样式并跳转路由

思路：
footer是五个主页面的公共组件，在footer组件跳转路由，在路由组件通过父子传参 current_ind 动态修改样式

工作台主页面组件

<template>
	<view>
		<Footer :current_ind='2'></Footer>
	</view>
</template>

footer.vue

<template>
	<view>
		<view v-for="(item,index) in footerList" :key="index">
			<view @click="handleChangeCurrentPage(item)">
				<text :class="[item.icon, current_ind === item.footer_ind ? 'current-page' : '']" ></text>
				<p :class="current_ind === item.footer_ind ? 'current-page' : ''">{{item.name}}</p>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			current_ind: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				footerList: [
					{
						icon: 'icon-xiaoxi',
						name: '消息',
						footer_ind: 0,
						page_route: '/pages/template/news/index'
					},
					{
						icon: 'icon-tongxunlu',
						name: '通讯录',
						footer_ind: 1,
						page_route: '/pages/template/mail-list/index'
					},
					{
						icon: 'icon-gongzuotai',
						name: '工作台',
						footer_ind: 2,
						page_route: '/pages/template/stage/index'
					},
					{
						icon: 'icon-xuexi_nor',
						name: '成长学院',
						footer_ind: 3,
						page_route: '/pages/template/growth-college/index'
					},
					{
						icon: 'icon-wenjian',
						name: '文档',
						footer_ind: 4,
						page_route: '/pages/template/document/index'
					}
				]
			}
		},
		methods: {
			handleChangeCurrentPage(item) {
				uni.navigateTo({
					url: item.page_route
				})
			}
		}
	}
</script>
<style>
	.current-page{
		color: #6487F8;
	}
</style>

开发过程中需要注意的一些零碎知识点

1. 动态切换类名
   <text class="iconfont " :class="[item.icon, current_ind === item.footer_ind ? 'current-page' : '']" ></text> 俩个动态类名使用数组

2. watch 监听事件，只有在值改变时才可以起到监听，有俩个参数 newVal, oldVal，分别是修改后和修改前

3. this 箭头函数指向，如果是下面代码，会报错 footerList is undefined，换成current_ind: function (newVal, oldVal) {} 可以解决报错

watch: {
	current_ind: (newVal, oldVal) => {
		this.footerList.forEach(item => {
			if (newVal === item.footer_ind) {
				uni.navigateTo({
					url: item.page_route
				})
			}
		})
	}
},

最后

以上就是凶狠眼睛为你收集整理的uni-app 点击footer导航实现样式的切换和路由的跳转的全部内容，希望文章能够帮你解决uni-app 点击footer导航实现样式的切换和路由的跳转所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。