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

1
2
3
4
5
6
<template>
	<view>
		<Footer :current_ind='2'></Footer>
	</view>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<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
2
3
4
5
6
7
8
9
10
11
12
watch: {
	current_ind: (newVal, oldVal) => {
		this.footerList.forEach(item => {
			if (newVal === item.footer_ind) {
				uni.navigateTo({
					url: item.page_route
				})
			}
		})
	}
},