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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
| <!--
| * @Author: your name
| * @Date: 2020-03-30 09:49:50
| * @LastEditTime: 2020-07-07 12:13:29
| * @LastEditors: Please set LastEditors
| * @Description: In User Settings Edit
| * @FilePath: \2020330\src\components\footer\footer.vue
| -->
| <template>
| <van-tabbar v-model="active" class="active_tab">
| <van-tabbar-item
| v-for="(item, index) in tabbars"
| :key="index"
| @click="tab(index, item.name)"
| >
| <span :class="currIndex == index ? active : ''">{{ item.title }}</span>
| <template slot="icon" slot-scope="props">
| <img :src="props.active ? item.active : item.normal" />
| </template>
| </van-tabbar-item>
| </van-tabbar>
| </template>
|
| <script>
| export default {
| name: "tabbar",
| data() {
| return {
| currIndex: 0,
| active: 0,
| tabbars: [
| {
| name: "/",
| title: "首页",
| normal: require("@/assets/images/nav/home.png"),
| active: require("@/assets/images/nav/home-fill.png")
| },
| {
| name: "myTextBook",
| title: "书架",
| normal: require("@/assets/images/nav/shujia.png"),
| active: require("@/assets/images/nav/shujia-fill.png")
| },
|
| {
| index: 3,
| name: "personalCenter",
| title: "我的",
| normal: require("@/assets/images/nav/my.png"),
| active: require("@/assets/images/nav/my-fill.png")
| }
| ]
| };
| },
| methods: {
| tab(index, val) {
| this.currIndex = index;
| this.$router.push(val);
| }
| },
| created() {
| // 通过路由跳转判断选中的样式
| if (this.$route.name == "/") {
| this.active = 0;
| this.currIndex = 0;
| } else if (this.$route.name == "myTextBook") {
| this.active = 1;
| this.currIndex = 2;
| } else if (this.$route.name == "personalCenter") {
| this.active = 2;
| this.currIndex = 3;
| }
| }
| };
| </script>
|
| <style scoped>
| .active_tab {
| z-index: 10;
| background: #fff;
| }
| .active_tab img {
| width: 20px;
| height: 20px;
| }
|
| .van-tabbar-item--active {
| color: rgb(53, 110, 255);
| }
|
| .van-tabbar--fixed {
| border-top: 1px solid rgba(215, 215, 215, 0.56);
| z-index: 3000;
| }
| </style>
|
|
