1 <template>
2 <view class="container">
3 <view class="nav">
4 <view class="navItem" :class="navIndex == index ? 'navActive':''" v-for="(item,index) in navList" :key="index" @tap="navClick(index)">{{item}}</view>
5 </view>
6 <view class="navCont" v-if="navIndex == index" v-for="(item,index) in navList" :key="index">{{item}}内容</view>
7 </view>
8 </template>
9
10 <script>
11 export default {
12 data() {
13 return {
14 navList: ['全部', '卡一', '卡二', '卡三', '卡四', '卡五', '卡六'],
15 navIndex: 0
16 }
17 },
18 methods: {
19 navClick(index) {
20 this.navIndex = index;
21 }
22 },
23 }
24 </script>
25
26 <style>
27 .nav {
28 position: fixed;
29 left: 0;
30 right: 0;
31 width: 100%;
32 height: 100upx;
33 display: flex;
34 align-items: center;
35 white-space: nowrap;
36 overflow: auto;
37 background-color: #FFFF00;
38 /* #ifdef APP-PLUS */
39 top: 0;
40 /* #endif */
41 /* #ifdef H5 */
42 top: 88upx;
43 /* #endif */
44 }
45
46 .navItem {
47 color: #333333;
48 font-size: 32upx;
49 padding: 0 30upx;
50 display: flex;
51 justify-content: center;
52 align-items: center;
53 flex-direction: column;
54 line-height: 100upx;
55 }
56
57 .navActive {
58 font-size: 42upx;
59 }
60
61 .navActive::after {
62 content: '';
63 width: 56upx;
64 height: 8upx;
65 background: #00ACFE;
66 margin-top: -8upx;
67 }
68
69 .navCont {
70 position: absolute;
71 top: 130upx;
72 background-color: #FF0000;
73 }
74 </style>
