初步实现
# 1 编写 tabbar
# 1) html 部分
<template>
<div id="app">
<div class="tab-bar">
<div class="tab-bar-item">首页</div>
<div class="tab-bar-item">分类</div>
<div class="tab-bar-item">发现</div>
<div class="tab-bar-item">购物车</div>
<div class="tab-bar-item">我的</div>
</div>
</div>
</template>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 2) css 部分
.tab-bar {
display: flex;
align-items: center;
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 50px;
background-color: #f2f2f2;
box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.1);
}
.tab-bar-item {
flex: 1;
text-align: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#
如果觉得有帮助, 可以微信扫码, 请杰哥喝杯咖啡~
上次更新: 2021/09/03, 15:32:17