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

缺乏、安全感 2023-01-05 12:09 245阅读 0赞

![在这里插入图片描述][20210112095728810.png]  
需求：  
点击切换样式并跳转路由

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

工作台主页面组件

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
    				})
    			}
    		})
    	}
    },

[20210112095728810.png]: /images/20221119/57b0752e3082463abcc0a03216f1f343.png