前端
底部导航栏组件(@/home/FineBox)
1、VantUI中找组件
Tabbar标签栏（通过名称匹配）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<van-tabbar v-model="active">
<van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>
<van-tabbar-item name="search" icon="search">标签</van-tabbar-item>
<van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>
<van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
export default {
data() {
return {
active: 'home', // 高亮
};
},
};
路由模式
1
2
3
4
5
6
<router-view />
<van-tabbar route>
<van-tabbar-item replace to="/home" icon="home-o">标签</van-tabbar-item>
<van-tabbar-item replace to="/search" icon="search">标签</van-tabbar-item>
</van-tabbar>
图标
1
2
<van-icon name="wap-home-o" />
<van-icon name="user-o" />
2、模板
1
2
3
4
5
6
7
8
<template>
<!-- 底部导航栏（公共组件） -->
<van-tabbar v-model="active">
<van-tabbar-item name="home" icon="wap-home-o">首页</van-tabbar-item>
<van-tabbar-item name="search" icon="search">搜索</van-tabbar-item>
<van-tabbar-item name="mine" icon="user-o">我的</van-tabbar-item>
</van-tabbar>
</template>
3、样式
4、Home页面中引用轮播图组件(@/views/HomeView)
引入组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
...
// footer
import FooterBar from '@/components/common/FooterBar'
export default {
name: 'HomeView',
components: {
...
// FooterBar
FooterBar
}
}
</script>
展示
1
2
3
4
5
6
7
<template>
<div class="home">
...
<!-- Footer -->
<footer-bar/>
</div>
</template>
5、填充数据
1
2
3
4
5
6
7
8
9
<script>
export default {
data () {
return {
active: 'home'
}
}
}
</script>